Smaller padding on mobile #10780

Ecodev · Oct 11, 2024 · df598f6 · df598f6
1 parent 952da64
commit df598f6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/client/app/home/home.component.scss b/client/app/home/home.component.scss
@@ -1,3 +1,5 @@
+@use '@ecodev/natural-layout' as nat;
+
 #searchByCode {
     border-radius: 5px;
     background: rgba(0, 0, 0, 0.05);
@@ -20,4 +22,9 @@ mat-toolbar {
     .admin-avatar {
         text-decoration: none;
     }
+
+    @include nat.media(null, sm) {
+        padding-right: 4px;
+        padding-left: 4px;
+    }
 }
diff --git a/client/app/profile/components/profile/profile.component.html b/client/app/profile/components/profile/profile.component.html
@@ -27,7 +27,7 @@
     </natural-sidenav>
 
     <natural-sidenav-content>
-        <div class="nat-vertical nat-padding nat-gap-30 body">
+        <div class="nat-vertical nat-gap-30 body">
             <div class="nat-vertical nat-gap-30 nat-sm-gap-0 nat-sm-horizontal">
                 <div class="nat-sm-expand nat-horizontal nat-wrap nat-gap-10 nat-left nat-top">
                     <div class="nat-horizontal nat-gap-10">

diff --git a/client/app/profile/components/profile/profile.component.scss b/client/app/profile/components/profile/profile.component.scss
@@ -1,3 +1,5 @@
+@use '@ecodev/natural-layout' as nat;
+
 :host {
     display: flex;
     flex: 1;
@@ -11,6 +13,11 @@
 .body {
     box-sizing: border-box;
     margin: 0 auto;
+
+    padding: 6px;
     width: 100%;
     max-width: 1300px;
+    @include nat.media(sm) {
+        padding: 30px;
+    }
 }
diff --git a/client/styles.scss b/client/styles.scss
@@ -80,6 +80,11 @@ select:-webkit-autofill {
 
 app-admin router-outlet + * {
     padding: 20px 20px 100px 20px;
+
+    @include nat.media(null, sm) {
+        padding-right: 6px;
+        padding-left: 6px;
+    }
 }
 
 .detail-speed-dial {