Cleanup header layout for small screens

oddbird · Feb 5, 2025 · 1e2f22d · 1e2f22d
1 parent aac9bd3
commit 1e2f22d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -26,6 +26,6 @@
     gap: inherit;
     grid-area: settings;
     grid-template-columns: repeat(2, auto);
-    justify-content: safe end;
+    justify-content: var(--justify-settings);
   }
 </style>
diff --git a/src/sass/components/_color-settings.scss b/src/sass/components/_color-settings.scss
@@ -10,14 +10,11 @@
   justify-content: end;
 
   @include config.above('sm-page-break') {
-    --align-label: right;
-
     grid-template: 'format-label format-input' auto / 1fr auto;
   }
 
   label {
     grid-area: format-label;
-    text-align: var(--align-label, left);
   }
 
   select {

diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
@@ -40,10 +40,13 @@ body {
   display: grid;
   gap: var(--shim) var(--double-gutter);
   grid-area: header;
-  grid-template: 'logo settings' auto / auto 1fr;
+  grid-template: 'logo' auto 'settings' auto / 1fr;
 
   @include config.above('sm-page-break') {
+    --justify-settings: safe end;
+
     gap: var(--double-gutter);
+    grid-template: 'logo settings' auto / auto 1fr;
   }
 }