Refactor layerOverlayMinHeight to avoid needless scrollbars

Note: this changes positions of some buttons at the bottom of modal.
oasisprotocol · Dec 16, 2023 · e5d0f47 · e5d0f47
1 parent 0527188
commit e5d0f47
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 75 deletions.
diff --git a/.changelog/1806.bugfix.md b/.changelog/1806.bugfix.md
@@ -0,0 +1 @@
+Refactor layerOverlayMinHeight to avoid needless scrollbars
diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
@@ -1,10 +1,9 @@
-import { useContext, useState } from 'react'
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
 import { Form } from 'grommet/es6/components/Form'
 import { FormField } from 'grommet/es6/components/FormField'
-import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Tab } from 'grommet/es6/components/Tab'
 import { Tabs } from 'grommet/es6/components/Tabs'
 import { Text } from 'grommet/es6/components/Text'
@@ -15,7 +14,6 @@ import { Trans, useTranslation } from 'react-i18next'
 import { Wallet } from '../../../../state/wallet/types'
 import { DerivationFormatter } from './DerivationFormatter'
 import { AddressBox } from '../../../AddressBox'
-import { layerOverlayMinHeight } from '../layer'
 import { LayerContainer } from './../LayerContainer'
 import { DeleteAccount } from './DeleteAccount'
 import { PrivateKeyFormatter } from '../../../PrivateKeyFormatter'
@@ -48,7 +46,6 @@ export const ManageableAccountDetails = ({
   const [value, setValue] = useState({ name: wallet.name || '' })
   const [layerVisibility, setLayerVisibility] = useState(false)
   const [deleteLayerVisibility, setDeleteLayerVisibility] = useState(false)
-  const isMobile = useContext(ResponsiveContext) === 'small'
   const hideLayer = () => {
     setLayerVisibility(false)
   }
@@ -58,7 +55,7 @@ export const ManageableAccountDetails = ({
       <LayerContainer animation={animation} hideLayer={closeHandler}>
         <Tabs>
           <Tab title={t('toolbar.settings.myAccountsTab', 'My Accounts')}>
-            <Box flex="grow" justify="between" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
+            <Box flex="grow" justify="between">
               <Form<FormValue>
                 onSubmit={({ value }) => {
                   if (!editAccount) {
@@ -117,7 +114,7 @@ export const ManageableAccountDetails = ({
                       <DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
                     </Text>
                   </Box>
-                  <Box justify="between" direction="row">
+                  <Box justify="between" direction="row" gap="medium">
                     <Button
                       alignSelf="start"
                       label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
@@ -167,21 +164,19 @@ export const ManageableAccountDetails = ({
         <LayerContainer hideLayer={hideLayer}>
           <Tabs>
             <Tab title={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}>
-              <Box flex="grow" justify="between" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
-                <Box gap="medium">
-                  <Text>
-                    {t(
-                      'toolbar.settings.exportPrivateKey.hint1',
-                      'The private key consists of a string of characters. Anyone with access to your private key has direct access to the assets of that account.',
-                    )}
-                  </Text>
-                  <Text>
-                    {t(
-                      'toolbar.settings.exportPrivateKey.hint2',
-                      'Once the private key is lost, it cannot be retrieved. Please make sure to Backup the private key and keep it in a safe place.',
-                    )}
-                  </Text>
-                </Box>
+              <Box flex="grow" justify="between" gap="medium">
+                <Text>
+                  {t(
+                    'toolbar.settings.exportPrivateKey.hint1',
+                    'The private key consists of a string of characters. Anyone with access to your private key has direct access to the assets of that account.',
+                  )}
+                </Text>
+                <Text>
+                  {t(
+                    'toolbar.settings.exportPrivateKey.hint2',
+                    'Once the private key is lost, it cannot be retrieved. Please make sure to Backup the private key and keep it in a safe place.',
+                  )}
+                </Text>
                 <RevealOverlayButton
                   label={t(
                     'toolbar.settings.exportPrivateKey.confirm',
@@ -190,9 +185,9 @@ export const ManageableAccountDetails = ({
                 >
                   <PrivateKeyFormatter privateKey={wallet.privateKey!} />
                 </RevealOverlayButton>
-                <Box direction="row" justify="between" pad={{ top: 'large' }}>
-                  <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={hideLayer} />
-                </Box>
+              </Box>
+              <Box direction="row" justify="between" pad={{ top: 'large' }}>
+                <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={hideLayer} />
               </Box>
             </Tab>
           </Tabs>

diff --git a/src/app/components/Toolbar/Features/Contacts/AddContact.tsx b/src/app/components/Toolbar/Features/Contacts/AddContact.tsx
@@ -1,14 +1,11 @@
-import { useContext } from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { Box } from 'grommet/es6/components/Box'
 import { Tabs } from 'grommet/es6/components/Tabs'
 import { Tab } from 'grommet/es6/components/Tab'
-import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { contactsActions } from 'app/state/contacts'
 import { Contact } from 'app/state/contacts/types'
 import { ContactAccountForm } from './ContactAccountForm'
-import { layerOverlayMinHeight } from '../layer'
 import { LayerContainer } from '../LayerContainer'
 
 interface AddContactProps {
@@ -17,15 +14,14 @@ interface AddContactProps {
 
 export const AddContact = ({ setLayerVisibility }: AddContactProps) => {
   const { t } = useTranslation()
-  const isMobile = useContext(ResponsiveContext) === 'small'
   const dispatch = useDispatch()
   const submitHandler = (contact: Contact) => dispatch(contactsActions.add(contact))
 
   return (
     <LayerContainer hideLayer={() => setLayerVisibility(false)}>
       <Tabs>
         <Tab title={t('toolbar.contacts.add', 'Add Contact')} style={{ textTransform: 'capitalize' }}>
-          <Box flex="grow" justify="center" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
+          <Box flex="grow" justify="center">
             <ContactAccountForm
               onCancel={() => setLayerVisibility(false)}
               onSave={contract => {

diff --git a/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx b/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx
@@ -1,15 +1,13 @@
-import { useContext, useState } from 'react'
+import { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { Box } from 'grommet/es6/components/Box'
-import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Tabs } from 'grommet/es6/components/Tabs'
 import { Tab } from 'grommet/es6/components/Tab'
 import { contactsActions } from 'app/state/contacts'
 import { Contact } from 'app/state/contacts/types'
 import { Account } from '../Account/Account'
 import { ContactAccountForm } from './ContactAccountForm'
-import { layerOverlayMinHeight } from '../layer'
 import { LayerContainer } from '../LayerContainer'
 
 interface ContactAccountProps {
@@ -19,7 +17,6 @@ interface ContactAccountProps {
 export const ContactAccount = ({ contact }: ContactAccountProps) => {
   const { t } = useTranslation()
   const [layerVisibility, setLayerVisibility] = useState(false)
-  const isMobile = useContext(ResponsiveContext) === 'small'
   const dispatch = useDispatch()
   const submitHandler = (contact: Contact) => dispatch(contactsActions.update(contact))
   const deleteHandler = (address: string) => dispatch(contactsActions.delete(address))
@@ -42,7 +39,7 @@ export const ContactAccount = ({ contact }: ContactAccountProps) => {
         <LayerContainer hideLayer={() => setLayerVisibility(false)}>
           <Tabs>
             <Tab title={t('toolbar.contacts.manage', 'Manage Contact')}>
-              <Box flex="grow" justify="center" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
+              <Box flex="grow" justify="center">
                 <ContactAccountForm
                   contact={contact}
                   onDelete={address => {

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
@@ -187,7 +187,6 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  min-height: auto;
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -525,7 +524,6 @@ exports[`<AddContact  /> should match snapshot 1`] = `
 .c17 {
   min-height: 0;
   padding-top: 24px;
-  padding-bottom: 24px;
 }
 
 .c15 {
@@ -693,11 +691,11 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
   border-radius: 4px;
-  top: 0px;
+  top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%,0);
-  -ms-transform: translate(-50%,0);
-  transform: translate(-50%,0);
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 .c4 {
@@ -831,7 +829,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
         <div
           class="c3"
           data-g-portal-id="0"
-          style="overflow-y: auto; width: 100%; max-width: none;"
+          style="overflow-y: auto; width: 100%; max-width: none; min-height: min(550px, 90dvh);"
         >
           <a
             aria-hidden="true"

diff --git a/src/app/components/Toolbar/Features/LayerContainer/index.tsx b/src/app/components/Toolbar/Features/LayerContainer/index.tsx
@@ -4,6 +4,7 @@ import { Button } from 'grommet/es6/components/Button'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Close } from 'grommet-icons/es6/icons/Close'
 import { ResponsiveLayer } from '../../../ResponsiveLayer'
+import { layerOverlayMinHeight } from '../layer'
 
 interface LayerContainerProps {
   animation?: boolean
@@ -21,9 +22,12 @@ export const LayerContainer = ({ animation, children, hideLayer }: LayerContaine
       animation={animation ? 'slide' : 'none'}
       background="background-front"
       modal
-      position="top"
-      margin={isMobile ? 'none' : 'xlarge'}
-      style={{ width: '100%', maxWidth: isMobile ? 'none' : '700px' }}
+      position="center"
+      style={{
+        width: '100%',
+        maxWidth: isMobile ? 'none' : '700px',
+        minHeight: `min(${layerOverlayMinHeight}, 90dvh)`,
+      }}
     >
       <Box margin={{ top: 'small', bottom: 'medium', horizontal: 'medium' }}>
         <Box align="end">

diff --git a/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
@@ -46,6 +46,23 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   -webkit-font-smoothing: antialiased;
 }
 
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -146,24 +163,6 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   flex-direction: column;
 }
 
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  min-height: auto;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
 .c15 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;

diff --git a/src/app/components/Toolbar/Features/Profile/index.tsx b/src/app/components/Toolbar/Features/Profile/index.tsx
@@ -1,15 +1,13 @@
-import { useContext, ReactNode } from 'react'
+import { ReactNode } from 'react'
 import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
 import { Text } from 'grommet/es6/components/Text'
-import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { User } from 'grommet-icons/es6/icons/User'
 import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { UpdatePassword } from './UpdatePassword'
-import { layerOverlayMinHeight } from './../layer'
 import { DeleteProfileButton } from '../../../Persist/DeleteProfileButton'
 
 type ProfileEmptyStateProps = {
@@ -29,7 +27,6 @@ interface ProfileProps {
 
 export const Profile = ({ closeHandler }: ProfileProps) => {
   const { t } = useTranslation()
-  const isMobile = useContext(ResponsiveContext) === 'small'
   const unlockedStatus = useSelector(selectUnlockedStatus)
   const isAvailable = unlockedStatus === 'unlockedProfile'
   const navigate = useNavigate()
@@ -60,7 +57,7 @@ export const Profile = ({ closeHandler }: ProfileProps) => {
   }
 
   return (
-    <Box flex="grow" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
+    <Box flex="grow">
       <UpdatePassword />
       <Box gap="small" margin={{ top: 'medium' }} alignSelf="start">
         <Text>{t('toolbar.profile.deletion', 'Deletion')}</Text>

diff --git a/src/app/components/Toolbar/Features/Settings/index.tsx b/src/app/components/Toolbar/Features/Settings/index.tsx
@@ -1,15 +1,10 @@
-import { useContext } from 'react'
 import { Box } from 'grommet/es6/components/Box'
-import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { ThemeSelect } from 'app/components/ThemeSwitcher'
 import { LanguageSelect } from 'app/components/LanguageSelect'
-import { layerOverlayMinHeight } from '../layer'
 
 export const Settings = () => {
-  const isMobile = useContext(ResponsiveContext) === 'small'
-
   return (
-    <Box height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }} gap="small">
+    <Box gap="small">
       <LanguageSelect />
       <ThemeSelect />
     </Box>

diff --git a/src/app/components/Toolbar/Features/layer.ts b/src/app/components/Toolbar/Features/layer.ts
@@ -1,2 +1,2 @@
 export const layerScrollableAreaHeight = '400px'
-export const layerOverlayMinHeight = '435px' // Keep child modals height in sync with parent modal
+export const layerOverlayMinHeight = '550px' // Keep child modals height in sync with parent modal
diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
@@ -222,7 +222,6 @@ const grommetCustomTheme: ThemeType = {
     panel: {
       extend: props => css`
         padding-top: ${props.theme.global?.edgeSize?.medium};
-        padding-bottom: ${props.theme.global?.edgeSize?.medium};
       `,
     },
   },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Refactor layerOverlayMinHeight to avoid needless scrollbars