Merge pull request #408 from WalletConnect/refactor/layout-styles-ban…

…ner-shift-the-content-out refactor: update layout styles
WalletConnect · Jan 16, 2024 · f9c1840 · f9c1840 · vercel · Jan 16, 2024
2 parents 8542b13 + 83c51ee
commit f9c1840
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 41 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -12,17 +12,10 @@
   max-width: 100vw;
   z-index: 0;
   position: relative;
-  height: calc(100vh - env(safe-area-inset-bottom) - var(--mobile-footer-height));
+  height: 100%;
+  padding-bottom: calc(env(safe-area-inset-bottom) + var(--mobile-footer-height));
   overflow: hidden;
 
-  @supports (height: 100dvh) {
-    height: calc(100dvh - env(safe-area-inset-bottom) - var(--mobile-footer-height));
-  }
-
-  @supports (height: 100dvh) {
-    max-height: 100dvh;
-  }
-
   .TargetSelector {
     grid-area: target-selector;
     display: var(--targetselector-display);
@@ -87,11 +80,7 @@
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
-    height: 100vh;
-
-    @supports (height: 100dvh) {
-      height: 100dvh;
-    }
+    padding-bottom: 0;
 
     .Sidebar {
       border-right: solid 1px var(--bg-color-2);
@@ -100,26 +89,18 @@
     .Main {
       flex: 1;
       width: 100%;
-      height: 100vh;
-
-      @supports (height: 100dvh) {
-        height: 100dvh;
-      }
+      height: 100%;
     }
 
     .TargetSelector {
       width: 320px;
       padding: 1rem 0.75rem;
       border-right: solid 1px var(--bg-color-2);
       position: relative;
-      height: 100vh;
+      height: 100%;
       overflow-x: hidden;
       overflow-y: auto;
 
-      @supports (height: 100dvh) {
-        height: 100dvh;
-      }
-
       .Input {
         padding: 0px 0.75rem;
 

diff --git a/src/components/general/Modal/Modal.scss b/src/components/general/Modal/Modal.scss
@@ -7,7 +7,7 @@
   background: var(--modal-overlay);
   z-index: 1;
   width: 100vw;
-  height: 100vh;
+  height: 100%;
 }
 
 .modal {

diff --git a/src/components/layout/Sidebar/Sidebar.scss b/src/components/layout/Sidebar/Sidebar.scss
@@ -7,7 +7,7 @@
   transform: translateX(-50%);
   gap: 1em;
   width: 3.75rem;
-  height: 100vh;
+  height: 100%;
   display: none;
 
   @include padding-y(2em);
@@ -95,7 +95,7 @@
 
     top: 0;
     left: 0;
-    height: 100vh;
+    height: 100%;
     flex-direction: column;
 
     &__Navigation {

diff --git a/src/components/layout/Sidebar/index.tsx b/src/components/layout/Sidebar/index.tsx
@@ -50,7 +50,7 @@ const Sidebar: React.FC<{ isLoggedIn: boolean }> = ({ isLoggedIn }) => {
 
     if (uiEnabled.settings) {
       items.push([
-        <SettingIcon isFilled={pathname.startsWith(NAVIGATION.settings.notification)} />,
+        <SettingIcon isFilled={pathname.startsWith(NAVIGATION.settings.index)} />,
         NAVIGATION.settings.index
       ])
     }

diff --git a/src/index.css b/src/index.css
@@ -16,6 +16,18 @@ body {
   overflow-y: hidden;
 }
 
+#root {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+@supports (height: 100dvh) {
+  #root {
+    height: 100dvh;
+  }
+}
+
 body,
 button,
 html,

diff --git a/src/pages/Login/Login.scss b/src/pages/Login/Login.scss
@@ -3,18 +3,15 @@
 .Login {
   --main-display: unset;
   background: var(--bg-color-1);
-  max-height: 100vh;
+  height: 100%;
+  max-height: 100%;
   display: grid;
   grid-template: var(--grid-template);
   grid-template-columns: 1fr;
   max-width: 100vw;
   z-index: 0;
   position: relative;
 
-  @supports (height: 100dvh) {
-    height: 100dvh;
-  }
-
   .Sidebar {
     padding-top: 1.25em;
     padding-bottom: 1em;
@@ -24,7 +21,7 @@
   .Main {
     position: relative;
     max-width: 100vw;
-    height: 100vh;
+    height: 100%;
     overflow-x: hidden;
     padding: 1rem 0.085em;
     display: flex;
@@ -33,10 +30,6 @@
     align-items: center;
     gap: 4rem;
 
-    @supports (height: 100dvh) {
-      height: 100dvh;
-    }
-
     &__connect-button {
       min-width: fit-content;
     }

diff --git a/src/pages/ScanQrCode/ScanQrCode.scss b/src/pages/ScanQrCode/ScanQrCode.scss
@@ -1,7 +1,7 @@
 .ScanQrCode {
   display: grid;
   place-items: center;
-  height: 100vh;
+  height: 100%;
   padding: 0;
   width: 100vw;
   background: var(--bg-color-1);

diff --git a/src/pages/widget/Connect/Connect.scss b/src/pages/widget/Connect/Connect.scss
@@ -2,7 +2,7 @@
   display: grid;
   place-items: center;
 
-  height: 100vh;
+  height: 100%;
   width: 100vw;
 
   &__container {

diff --git a/src/pages/widget/Subscribe/Subscribe.scss b/src/pages/widget/Subscribe/Subscribe.scss
@@ -2,7 +2,7 @@
   display: grid;
   place-items: center;
 
-  height: 100vh;
+  height: 100%;
   width: 100vw;
 
   &__icon {