Fixing a few minor display issues that popped after further testing o…

…f the new sidebar layout
near · Mar 22, 2024 · 589f549 · 589f549
1 parent 719ee49
commit 589f549
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/components/sidebar-navigation/styles.ts b/src/components/sidebar-navigation/styles.ts
@@ -303,7 +303,7 @@ export const Sidebar = styled.div<{
   left: 0;
   width: var(--sidebar-width-expanded);
 
-  height: calc(100dvh + 1px);
+  height: 100dvh;
   ${overflowContain}
 
   flex-shrink: 0;
@@ -340,7 +340,7 @@ export const Sidebar = styled.div<{
   @media (max-width: ${SMALL_SCREEN_LAYOUT_MAX_WIDTH}px) {
     position: fixed;
     top: var(--header-height);
-    height: calc(100dvh + 1px - var(--header-height));
+    height: calc(100dvh - var(--header-height));
 
     ${(p) =>
       p.$expanded
@@ -493,7 +493,7 @@ export const SmallScreenNavigationBackground = styled.div<{
   z-index: 999;
   top: var(--header-height);
   width: 0;
-  height: calc(100dvh + 1px - var(--header-height));
+  height: calc(100dvh - var(--header-height));
   background: var(--white);
   transition: all var(--sidebar-expand-transition-speed);
 
@@ -537,7 +537,7 @@ export const Drawer = styled.div<{
   top: 0;
   left: 68px;
 
-  height: calc(100dvh + 1px);
+  height: 100dvh;
   ${overflowContain}
 
   width: 0;
@@ -561,7 +561,7 @@ export const Drawer = styled.div<{
   @media (max-width: ${SMALL_SCREEN_LAYOUT_MAX_WIDTH}px) {
     position: fixed;
     top: var(--header-height);
-    height: calc(100dvh + 1px - var(--header-height));
+    height: calc(100dvh - var(--header-height));
     box-shadow: none;
 
     ${(p) =>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -34,6 +34,8 @@ a:hover {
 }
 
 .gateway-page-container {
+  width: 100%;
+  flex-grow: 1;
   max-width: 1320px;
   margin: 0 auto;
   padding: var(--gateway-page-container-padding-y) var(--gateway-page-container-padding-x);