Improve layout of content header on mobile with long title

TrestleAdmin · Jul 22, 2024 · d4aba38 · d4aba38
1 parent 932152f
commit d4aba38
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/frontend/css/layout/_content-header.scss b/frontend/css/layout/_content-header.scss
@@ -1,8 +1,9 @@
 .content-header {
   display: grid;
-  grid-template-columns: max-content auto;
+  grid-template-columns: auto auto;
   grid-template-areas: "title toolbars"
                        "breadcrumbs toolbars";
+  align-items: center;
 
   background: $content-header-bg;
   padding: 1rem 1.5rem;
@@ -19,6 +20,7 @@
 
 .content-header-title {
   grid-area: title;
+  align-self: start;
   margin: 0.25rem 0;
 
   @include media-breakpoint-down(md) {
@@ -34,6 +36,10 @@
     @include media-breakpoint-down(md) {
       font-size: 2.25rem;
     }
+
+    @include media-breakpoint-down(md) {
+      font-size: 2rem;
+    }
   }
 }