Fix layout issues

oasisprotocol · Oct 13, 2023 · 50a97db · 50a97db
1 parent ac3bf17
commit 50a97db
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 10 deletions.
diff --git a/src/app/components/ResponsiveLayer/index.tsx b/src/app/components/ResponsiveLayer/index.tsx
@@ -36,7 +36,15 @@ export function ResponsiveLayer(props: LayerExtendedProps) {
 
   return (
     <Layer {...props} ref={layerRef} style={{ overflowY: 'auto', ...props.style }}>
-      <Box fill={isMobile}>{props.children}</Box>
+      <Box
+        // Prevents Grommet flex overlap issue in smaller viewport
+        flex={{ shrink: 0 }}
+        style={{
+          minHeight: isMobile ? '100dvh' : 'auto',
+        }}
+      >
+        {props.children}
+      </Box>
     </Layer>
   )
 }
diff --git a/...p/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap b/...p/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
@@ -141,12 +141,12 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
+  margin-bottom: 48px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: 90%;
   padding-top: 24px;
   padding-bottom: 24px;
   padding-right: 12px;
@@ -309,6 +309,10 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
 
 }
 
+@media only screen and (max-width:768px) {
+
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     border: solid 1px #0092f6;
@@ -346,6 +350,12 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c1 {
+    margin-bottom: 24px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c1 {
     padding-top: 12px;
@@ -371,6 +381,7 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
     >
       <div
         class="c1"
+        style="max-height: 400px;"
       >
         <div
           aria-checked="false"

diff --git a/...app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap b/...app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
@@ -26,8 +26,9 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 
 .c6 {
@@ -724,6 +725,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
           />
           <div
             class="c5"
+            style="min-height: 100dvh;"
           >
             <div
               class="c6"

diff --git a/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/index.test.tsx.snap
@@ -125,12 +125,12 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
+  margin-bottom: 48px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: 90%;
   padding-top: 24px;
   padding-bottom: 24px;
   padding-right: 12px;
@@ -288,6 +288,10 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 
 }
 
+@media only screen and (max-width:768px) {
+
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     border: solid 1px #0092f6;
@@ -319,6 +323,12 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c1 {
+    margin-bottom: 24px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c1 {
     padding-top: 12px;
@@ -342,6 +352,7 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 >
   <div
     class="c1"
+    style="max-height: 400px;"
   >
     <div
       aria-checked="false"

diff --git a/src/app/components/Toolbar/Features/ScrollableContainer/index.tsx b/src/app/components/Toolbar/Features/ScrollableContainer/index.tsx
@@ -1,7 +1,7 @@
 import { useContext, ReactNode } from 'react'
 import { Box } from 'grommet/es6/components/Box'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
-import { mobileScrollableAreaHeight, layerScrollableAreaHeight } from '../layer'
+import { layerScrollableAreaHeight } from '../layer'
 
 interface ScrollableContainerProps {
   children: ReactNode
@@ -15,7 +15,8 @@ export const ScrollableContainer = ({ children }: ScrollableContainerProps) => {
       gap="small"
       pad={{ vertical: 'medium', right: 'small' }}
       overflow={{ vertical: 'auto' }}
-      height={isMobile ? mobileScrollableAreaHeight : layerScrollableAreaHeight}
+      style={{ maxHeight: layerScrollableAreaHeight }}
+      margin={{ bottom: isMobile ? 'large' : 'none' }}
     >
       {children}
     </Box>

diff --git a/src/app/components/Toolbar/Features/layer.ts b/src/app/components/Toolbar/Features/layer.ts
@@ -1,3 +1,2 @@
-export const mobileScrollableAreaHeight = '90%'
 export const layerScrollableAreaHeight = '400px'
 export const layerOverlayMinHeight = '435px' // Keep child modals height in sync with parent modal
diff --git a/...letPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap b/...letPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap
@@ -26,8 +26,9 @@ exports[`<ImportAccountsSelectionModal  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 
 .c6 {
@@ -645,6 +646,7 @@ exports[`<ImportAccountsSelectionModal  /> should match snapshot 1`] = `
           />
           <div
             class="c5"
+            style="min-height: 100dvh;"
           >
             <form
               autocapitalize="off"