styles adjusted for mobile

toniskobic · Sep 5, 2023 · bd32afb · bd32afb
1 parent 5531bfb
commit bd32afb
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/app/components/website-settings-dialog/website-settings-dialog.component.html b/src/app/components/website-settings-dialog/website-settings-dialog.component.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title class="mat-elevation-z6">{{ 'WEBSITE_SETTINGS_DIALOG.TITLE' | translate }}</h2>
   <mat-dialog-content>
     <p>{{ 'WEBSITE_SETTINGS_DIALOG.CONTENT' | translate }}</p>
-    <div class="grid content-wrapper mat-elevation-z6">
+    <div class="grid grid--fluid content-wrapper mat-elevation-z6">
       <div>
         <h3>{{ 'WEBSITE_SETTINGS_DIALOG.LABELS.WEBSITE' | translate }}</h3>
         <drd-website-settings></drd-website-settings>

diff --git a/src/styles/dragon-drop/components/_grid.scss b/src/styles/dragon-drop/components/_grid.scss
@@ -4,6 +4,12 @@
   grid-template-rows: repeat(2, 1fr);
   grid-gap: 10px;
   padding-inline: 5px;
+
+  &--fluid {
+    @media only screen and (max-width: 640px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
 }
 
 .grid-item-text {

diff --git a/src/styles/dragon-drop/layouts/_header.scss b/src/styles/dragon-drop/layouts/_header.scss
@@ -4,7 +4,8 @@ header {
     height: $toolbar-height;
     z-index: 10;
     gap: 10px;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
 
     .subcontainer {
       display: flex;