Merge pull request #1696 from oasisprotocol/mz/contactListFix

Contacts overlap issue fix
oasisprotocol · Oct 3, 2023 · 71001ff · 71001ff
2 parents 1f5e54c + 528985c
commit 71001ff
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 106 deletions.
diff --git a/src/app/components/Toolbar/Features/Account/Account.tsx b/src/app/components/Toolbar/Features/Account/Account.tsx
@@ -44,7 +44,7 @@ export const Account = memo((props: AccountProps) => {
       background={props.isActive ? 'neutral-2' : undefined}
       border={{ color: props.isActive ? 'neutral-2' : 'brand' }}
       pad="small"
-      flex="grow"
+      flex={{ shrink: 0 }}
       fill="horizontal"
       role="checkbox"
       aria-checked={props.isActive}

diff --git a/src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap b/src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap
@@ -43,9 +43,9 @@ exports[`<Account  /> should match snapshot 1`] = `
   -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-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   width: 100%;
   padding: 12px;
   border-radius: 5px;

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
@@ -14,25 +14,6 @@ exports[`<AccountSelector  /> should match snapshot 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;
-  max-height: 400px;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  padding-right: 12px;
-  overflow-y: auto;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -46,9 +27,9 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   -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-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   width: 100%;
   padding: 12px;
   border-radius: 5px;
@@ -153,6 +134,25 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   padding-top: 24px;
 }
 
+.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;
+  height: 90%;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-right: 12px;
+  overflow-y: auto;
+}
+
 .c5 {
   font-size: 18px;
   line-height: 24px;
@@ -302,16 +302,11 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c1 {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
+
 }
 
 @media only screen and (max-width:768px) {
-  .c1 {
-    padding-right: 6px;
-  }
+
 }
 
 @media only screen and (max-width:768px) {
@@ -351,6 +346,19 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c1 {
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c1 {
+    padding-right: 6px;
+  }
+}
+
 @media only screen and (max-width:768px) {
 
 }

diff --git a/src/app/components/Toolbar/Features/AccountSelector/index.tsx b/src/app/components/Toolbar/Features/AccountSelector/index.tsx
@@ -11,6 +11,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { ManageableAccount } from '../Account/ManageableAccount'
+import { ScrollableContainer } from '../ScrollableContainer'
 
 interface Props {
   closeHandler: () => any
@@ -38,14 +39,7 @@ export const AccountSelector = memo((props: Props) => {
 
   return (
     <>
-      <Box
-        gap="small"
-        pad={{ vertical: 'medium', right: 'small' }}
-        overflow={{ vertical: 'auto' }}
-        height={{ max: '400px' }}
-      >
-        {accounts}
-      </Box>
+      <ScrollableContainer>{accounts}</ScrollableContainer>
       <Box align="end" pad={{ top: 'medium' }}>
         <Button primary label={t('toolbar.wallets.select', 'Select')} onClick={props.closeHandler} />
       </Box>

diff --git a/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx b/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx
@@ -25,7 +25,7 @@ export const ContactAccount = ({ contact }: ContactAccountProps) => {
   const deleteHandler = (address: string) => dispatch(contactsActions.delete(address))
 
   return (
-    <Box>
+    <>
       <Account
         address={contact.address}
         balance={undefined}
@@ -75,6 +75,6 @@ export const ContactAccount = ({ contact }: ContactAccountProps) => {
           </Box>
         </ResponsiveLayer>
       )}
-    </Box>
+    </>
   )
 }
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
@@ -15,20 +15,6 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 }
 
 .c2 {
-  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;
-}
-
-.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -41,21 +27,21 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   -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-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   width: 100%;
   padding: 12px;
   border-radius: 5px;
   cursor: pointer;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #0092f6;
   color: #FFFFFF;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -72,6 +58,20 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   flex: 1 0 auto;
 }
 
+.c4 {
+  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;
+}
+
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -130,7 +130,7 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: auto;
+  height: 90%;
   padding-top: 24px;
   padding-bottom: 24px;
   padding-right: 12px;
@@ -289,13 +289,13 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c3 {
+  .c2 {
     border: solid 1px #0092f6;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c3 {
+  .c2 {
     padding: 6px;
   }
 }
@@ -344,58 +344,54 @@ exports[`<Contacts  /> should match snapshot 1`] = `
     class="c1"
   >
     <div
+      aria-checked="false"
       class="c2"
+      data-testid="account-choice"
+      role="checkbox"
+      tabindex="0"
     >
       <div
-        aria-checked="false"
         class="c3"
-        data-testid="account-choice"
-        role="checkbox"
-        tabindex="0"
       >
         <div
           class="c4"
+          data-testid="account-name"
         >
-          <div
-            class="c2"
-            data-testid="account-name"
+          <span
+            class="c5"
           >
-            <span
-              class="c5"
-            >
-              My Contact
-            </span>
-          </div>
-          <div
-            class="c2"
+            My Contact
+          </span>
+        </div>
+        <div
+          class="c4"
+        >
+          <span
+            class="c5"
           >
             <span
-              class="c5"
+              class="notranslate"
+              translate="no"
             >
-              <span
-                class="notranslate"
-                translate="no"
-              >
-                oasis1qq2v...sv0d5eq4
-              </span>
+              oasis1qq2v...sv0d5eq4
             </span>
-          </div>
+          </span>
+        </div>
+        <div
+          class="c6"
+        >
           <div
-            class="c6"
+            class="c3"
           >
             <div
-              class="c4"
+              class="c7"
             >
-              <div
-                class="c7"
+              <button
+                class="c8"
+                type="button"
               >
-                <button
-                  class="c8"
-                  type="button"
-                >
-                  Manage
-                </button>
-              </div>
+                Manage
+              </button>
             </div>
           </div>
         </div>

diff --git a/src/app/components/Toolbar/Features/Contacts/index.tsx b/src/app/components/Toolbar/Features/Contacts/index.tsx
@@ -10,6 +10,7 @@ import { selectContactsList } from 'app/state/contacts/selectors'
 import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { ContactAccount } from './ContactAccount'
 import { AddContact } from './AddContact'
+import { ScrollableContainer } from '../ScrollableContainer'
 import { layerScrollableAreaHeight } from '../layer'
 
 type ContactsListEmptyStateProps = {
@@ -71,16 +72,11 @@ export const Contacts = ({ closeHandler }: ContactsProps) => {
         </Box>
       )}
       {!!contacts.length && (
-        <Box
-          gap="small"
-          pad={{ vertical: 'medium', right: 'small' }}
-          overflow={{ vertical: 'auto' }}
-          height={isMobile ? 'auto' : layerScrollableAreaHeight}
-        >
+        <ScrollableContainer>
           {contacts.map(contact => (
             <ContactAccount key={contact.address} contact={contact} />
           ))}
-        </Box>
+        </ScrollableContainer>
       )}
       <Box align="center">
         <Button