Merge pull request #830 from VEuPathDB/style/fix-grid-layout-bug

Fix bug with grid rows and breakpoints
VEuPathDB · Feb 9, 2024 · 5c36a85 · 5c36a85
2 parents 9734e43 + 0aa5163
commit 5c36a85
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/packages/libs/web-common/src/styles/default-layout.scss b/packages/libs/web-common/src/styles/default-layout.scss
@@ -36,7 +36,7 @@ body.vpdb-Body {
     grid-template-rows: $expanded-header-height auto 1fr auto;
 
     @media screen and (max-width: $hamburger-width) {
-      grid-template-rows: auto auto 1fr auto !important;
+      grid-template-rows: auto auto 1fr auto;
     }
 
     grid-template-columns: 100%;

diff --git a/...enomics-site/webapp/wdkCustomization/js/client/components/homepage/VEuPathDBHomePage.scss b/...enomics-site/webapp/wdkCustomization/js/client/components/homepage/VEuPathDBHomePage.scss
@@ -194,18 +194,3 @@ body.vpdb-Body .ExternalContentController a[name]::before {
 body.vpdb-Body .wdk-RecordSidebarContainer {
   top: 2em;
 }
-
-body.vpdb-Body .vpdb-RootContainer {
-  @media screen and (max-width: $mobile-width) {
-    grid-template-areas:
-      'header'
-      'subheader'
-      'banner'
-      'nav'
-      'content'
-      'side'
-      'footer';
-
-    grid-template-rows: auto auto auto auto 1fr auto auto;
-  }
-}
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/styles/home-page-layout.scss b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/styles/home-page-layout.scss
@@ -10,6 +10,10 @@ body.vpdb-Body .vpdb-RootContainer {
 
   grid-template-rows: 11em auto auto 1fr auto;
 
+  @media screen and (max-width: $hamburger-width) {
+    grid-template-rows: auto auto auto 1fr auto;
+  }
+
   &__home {
     grid-template-areas:
       'header header header'
@@ -32,6 +36,19 @@ body.vpdb-Body .vpdb-RootContainer {
         'nav side side'
         'footer footer footer';
     }
+
+    @media screen and (max-width: $mobile-width) {
+      grid-template-areas:
+        'header'
+        'subheader'
+        'banner'
+        'nav'
+        'content'
+        'side'
+        'footer';
+
+      grid-template-rows: auto auto auto auto 1fr auto auto;
+    }
   }
 
   &__home.vpdb-RootContainer__news-expanded {