Update mobile paddings

dfinity · Jan 31, 2025 · 27059a1 · 27059a1
1 parent b274020
commit 27059a1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -27,5 +27,11 @@
 
   header {
     --toolbar-padding: 0;
+    @include media.min-width(medium) {
+      --toolbar-padding: 0 var(--padding-2x);
+    }
+    @include media.min-width(large) {
+      --toolbar-padding: 0;
+    }
   }
 </style>
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
@@ -30,7 +30,7 @@
 
     margin: 0;
     padding: 0;
-    @include media.min-width(large) {
+    @include media.min-width(medium) {
       padding: 0 var(--padding-2x);
     }
   }

diff --git a/src/lib/styles/global/layout.scss b/src/lib/styles/global/layout.scss
@@ -10,12 +10,10 @@ main {
   max-width: var(--max-main-content-width);
   min-height: 100%;
 
-  @include media.min-width(large) {
-    padding: var(--padding-2x) 0;
-  }
+  padding: var(--padding-2x) var(--padding);
 
-  @include media.min-width(large) {
-    padding: var(--padding-4x);
+  @include media.min-width(medium) {
+    padding: var(--padding-2x);
   }
 
   @include media.min-width(large) {

diff --git a/src/lib/styles/mixins/_layout.scss b/src/lib/styles/mixins/_layout.scss
@@ -14,13 +14,14 @@
     cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
 
   overflow: hidden;
-  border-radius: var(--border-radius);
-  @include media.min-width(large) {
+
+  @include media.min-width(medium) {
     border-radius: var(--border-radius-2x);
+    margin: var(--content-margin);
   }
 
   box-sizing: border-box;
-  margin: var(--content-margin);
+
   padding-top: 0;
 
   // If a bottom sheet is displayed the content pane height should be updated accordingly