Ensure top heading action icon is to right when width allows (#2076)

elixir-lang · Jan 27, 2025 · 2d6368f · 2d6368f
1 parent 654960a
commit 2d6368f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/assets/css/content/general.css b/assets/css/content/general.css
@@ -34,6 +34,17 @@
 .content-inner .heading-with-actions.top-heading .icon-action {
   font-size: 1.2rem;
 }
+/* When content is wide enough, ensure action icon is to the right of, not below, heading */
+@container content (width > 600px) {
+  .content-inner .heading-with-actions.top-heading {
+    flex-wrap: nowrap;
+    gap: 32px;
+    align-items: flex-start;
+    .icon-action {
+      padding-top: 1.7rem; /* vertically align with x-height of first line of heading */
+    }
+  }
+}
 
 .content-inner .top-heading {
   padding-top: 1rem;

diff --git a/assets/css/layout.css b/assets/css/layout.css
@@ -59,6 +59,7 @@ body {
 }
 
 .content .content-inner {
+  container: content / inline-size;
   max-width: var(--content-width);
   min-height: 100%;
   margin: 0 auto;