Merge pull request #2230 from oasisprotocol/mz/mobileAccList

Adjust My accounts and Contacts scrollable area heights on mobile

Author: buberdds

.changelog/2230.bugfix.md

@@ -0,0 +1 @@
+Adjust My accounts and Contacts scrollable area heights on mobile

src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap

@@ -233,11 +233,18 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
@@ -667,10 +674,11 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
     >
       <div
         class="c1"
+        style="height: 0px;"
       >
         <div
           class="c2"
-          style="max-height: 400px;"
+          style=""
         >
           <div
             aria-checked="false"

src/app/components/Toolbar/Features/AccountSelector/index.tsx

@@ -8,13 +8,14 @@ import { selectAddress, selectWallets, selectHasOneAccount } from 'app/state/wal
 import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
-import { memo } from 'react'
+import { memo, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { ManageableAccount } from '../Account/ManageableAccount'
 import { ScrollableContainer } from '../ScrollableContainer'
 import { ButtonLink } from '../../../ButtonLink'
 import { Add } from 'grommet-icons/es6/icons/Add'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 
 interface Props {
   closeHandler: () => any
@@ -32,7 +33,7 @@ export const AccountSelector = memo((props: Props) => {
     dispatch(walletActions.selectWallet(address))
     props.closeHandler()
   }
-
+  const isMobile = useContext(ResponsiveContext) === 'small'
   const accounts = Object.values(wallets).map(wallet => (
     <ManageableAccount
       closeHandler={props.closeHandler}
@@ -59,9 +60,9 @@ export const AccountSelector = memo((props: Props) => {
   ))
 
   return (
-    <Box flex="grow" justify="between" gap="medium">
+    <Box flex="grow" justify="between" gap="medium" style={{ height: isMobile ? '0' : 'auto' }}>
       <ScrollableContainer>{accounts}</ScrollableContainer>
-      <Box direction="row" justify="between" gap="medium">
+      <Box direction="row" justify="between" gap="medium" flex="grow" align="end">
         <ButtonLink
           icon={<Add a11yTitle={undefined} />}
           label={t('menu.addAccounts', 'Add accounts')}

src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/index.test.tsx.snap

@@ -134,9 +134,16 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   align-items: flex-end;
   min-width: 0;
   min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
 }
 
 .c2 {
@@ -394,10 +401,11 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 >
   <div
     class="c1"
+    style="height: 0px;"
   >
     <div
       class="c2"
-      style="max-height: 400px;"
+      style=""
     >
       <div
         aria-checked="false"

src/app/components/Toolbar/Features/Contacts/index.tsx

@@ -1,4 +1,4 @@
-import { useState, ReactNode } from 'react'
+import { useState, useContext, ReactNode } from 'react'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -10,6 +10,7 @@ import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { ContactAccount } from './ContactAccount'
 import { AddContact } from './AddContact'
 import { ScrollableContainer } from '../ScrollableContainer'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 
 type ContactsListEmptyStateProps = {
   children: ReactNode
@@ -34,6 +35,7 @@ export const Contacts = ({ closeHandler }: ContactsProps) => {
   const contacts = useSelector(selectContactsList)
   const unlockedStatus = useSelector(selectUnlockedStatus)
   const isAvailable = unlockedStatus === 'unlockedProfile'
+  const isMobile = useContext(ResponsiveContext) === 'small'
   const navigate = useNavigate()
 
   if (!isAvailable) {
@@ -63,7 +65,7 @@ export const Contacts = ({ closeHandler }: ContactsProps) => {
 
   return (
     <>
-      <Box flex="grow" justify="between" gap="medium">
+      <Box flex="grow" justify="between" gap="medium" style={{ height: isMobile ? '0' : 'auto' }}>
         {!contacts.length && (
           <ContactsListEmptyState>
             {t('toolbar.contacts.emptyList', 'You have no contacts yet.')}
@@ -76,7 +78,7 @@ export const Contacts = ({ closeHandler }: ContactsProps) => {
             ))}
           </ScrollableContainer>
         )}
-        <Box align="end">
+        <Box direction="row" justify="end" gap="medium" flex="grow" align="end">
           <Button
             primary
             label={t('toolbar.contacts.add', 'Add contact')}

src/app/components/Toolbar/Features/ScrollableContainer/index.tsx

@@ -17,7 +17,7 @@ export const ScrollableContainer = ({ children }: ScrollableContainerProps) => {
       gap="small"
       pad={{ right: 'small', left: spaceForFocusIndicator }}
       overflow={{ vertical: 'auto' }}
-      style={{ maxHeight: layerScrollableAreaHeight }}
+      style={{ maxHeight: isMobile ? undefined : layerScrollableAreaHeight }}
       margin={{ bottom: isMobile ? 'large' : 'none', left: `-${spaceForFocusIndicator}` }}
     >
       {children}