From c25d9c968e17346d87791662415ae2709fed26d8 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 6 Sep 2023 16:52:41 -0700
Subject: [PATCH] Update account list to use all available screen space
 (#20745)

* Updating ModalContent styles and padding to allow for dynamic resizing of content that allows scrolling within the modal. This commit also updates the AccountListMenu so the account list can resize dynamically to take up all screen space available

* Updating the scroll bar styles from default for the ModalContent component so the scrollbar is thinner and more sleek
---
 .../__snapshots__/modal-content.test.tsx.snap |  4 ++--
 .../modal-content/modal-content.scss          | 16 +++++++++++++
 .../modal-content/modal-content.test.tsx      | 10 ++++++--
 .../modal-content/modal-content.tsx           | 16 +++++++------
 .../account-list-menu/account-list-menu.js    | 24 +++++++++----------
 .../multichain/account-list-menu/index.scss   |  5 +++-
 6 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap b/ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap
index 1a82b95f4..852a91209 100644
--- a/ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap
+++ b/ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`ModalContent should match snapshot 1`] = `
 <div
-  class="mm-box mm-modal-content mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+  class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
   data-testid="test"
 >
   <section
     aria-modal="true"
-    class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--sm:margin-top-8 mm-box--md:margin-top-12 mm-box--sm:margin-bottom-8 mm-box--md:margin-bottom-12 mm-box--padding-4 mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+    class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-4 mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
     role="dialog"
   >
     test
diff --git a/ui/components/component-library/modal-content/modal-content.scss b/ui/components/component-library/modal-content/modal-content.scss
index d9e032140..326a8e1c0 100644
--- a/ui/components/component-library/modal-content/modal-content.scss
+++ b/ui/components/component-library/modal-content/modal-content.scss
@@ -6,6 +6,22 @@
   overflow: auto;
   overscroll-behavior-y: none;
 
+  // Scroll bar styles
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-icon-muted) transparent;
+
+  // Webkit: Chrome, Brave
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+    background: var(--color-icon-muted);
+  }
+
   &__dialog {
     --modal-content-size: var(--size, 360px);
 
diff --git a/ui/components/component-library/modal-content/modal-content.test.tsx b/ui/components/component-library/modal-content/modal-content.test.tsx
index df87ccf89..7607e92e6 100644
--- a/ui/components/component-library/modal-content/modal-content.test.tsx
+++ b/ui/components/component-library/modal-content/modal-content.test.tsx
@@ -55,11 +55,14 @@ describe('ModalContent', () => {
       'mm-modal-content__dialog--size-sm',
     );
   });
-  it('should render with additional props being passed to modalDialogProps', () => {
+  it('should render with additional props being passed to modalDialogProps and not override default class name', () => {
     const { getByTestId } = render(
       <Modal isOpen onClose={onClose}>
         <ModalContent
-          modalDialogProps={{ 'data-testid': 'test' }}
+          modalDialogProps={{
+            'data-testid': 'test',
+            className: 'custom-dialog-class',
+          }}
           data-testid="modal-content"
         >
           test
@@ -67,6 +70,9 @@ describe('ModalContent', () => {
       </Modal>,
     );
     expect(getByTestId('test')).toBeDefined();
+    expect(getByTestId('test')).toHaveClass(
+      'mm-modal-content__dialog custom-dialog-class',
+    );
   });
   it('should close when escape key is pressed', () => {
     const { getByRole } = render(
diff --git a/ui/components/component-library/modal-content/modal-content.tsx b/ui/components/component-library/modal-content/modal-content.tsx
index 70f1dfc4e..202fd55f5 100644
--- a/ui/components/component-library/modal-content/modal-content.tsx
+++ b/ui/components/component-library/modal-content/modal-content.tsx
@@ -86,25 +86,27 @@ export const ModalContent = forwardRef(
           height={BlockSize.Screen}
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.flexStart}
-          padding={4}
+          paddingRight={4}
+          paddingLeft={4}
+          paddingTop={[4, 8, 12]}
+          paddingBottom={[4, 8, 12]}
           {...props}
         >
           <Box
-            className={classnames(
-              'mm-modal-content__dialog',
-              `mm-modal-content__dialog--size-${size}`,
-            )}
             as="section"
             role="dialog"
             aria-modal="true"
             backgroundColor={BackgroundColor.backgroundDefault}
             borderRadius={BorderRadius.LG}
             width={BlockSize.Full}
-            marginTop={[null, 8, 12]}
-            marginBottom={[null, 8, 12]}
             padding={4}
             ref={modalDialogRef}
             {...modalDialogProps}
+            className={classnames(
+              'mm-modal-content__dialog',
+              `mm-modal-content__dialog--size-${size}`,
+              modalDialogProps?.className,
+            )}
           >
             {children}
           </Box>
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js
index 6f3935e4d..c44b6e5b5 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@@ -19,6 +19,8 @@ import {
   BlockSize,
   Size,
   TextColor,
+  Display,
+  FlexDirection,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -85,24 +87,22 @@ export const AccountListMenu = ({ onClose }) => {
       <ModalOverlay />
       <ModalContent
         className="multichain-account-menu-popover"
-        modalDialogProps={{ padding: 0, marginBottom: 0 }}
+        modalDialogProps={{
+          className: 'multichain-account-menu-popover__dialog',
+          padding: 0,
+          display: Display.Flex,
+          flexDirection: FlexDirection.Column,
+        }}
       >
         <ModalHeader
-          paddingTop={4}
-          paddingRight={4}
-          paddingBottom={6}
+          padding={4}
           onClose={onClose}
           onBack={actionMode === '' ? null : () => setActionMode('')}
         >
           {title}
         </ModalHeader>
         {actionMode === 'add' ? (
-          <Box
-            paddingLeft={4}
-            paddingRight={4}
-            paddingBottom={4}
-            paddingTop={0}
-          >
+          <Box paddingLeft={4} paddingRight={4} paddingBottom={4}>
             <CreateAccount
               onActionComplete={(confirmed) => {
                 if (confirmed) {
@@ -133,7 +133,7 @@ export const AccountListMenu = ({ onClose }) => {
           </Box>
         ) : null}
         {actionMode === '' ? (
-          <Box>
+          <>
             {/* Search box */}
             {accounts.length > 1 ? (
               <Box
@@ -315,7 +315,7 @@ export const AccountListMenu = ({ onClose }) => {
                 ///: END:ONLY_INCLUDE_IN
               }
             </Box>
-          </Box>
+          </>
         ) : null}
       </ModalContent>
     </Modal>
diff --git a/ui/components/multichain/account-list-menu/index.scss b/ui/components/multichain/account-list-menu/index.scss
index bd4f1d909..34b8faffd 100644
--- a/ui/components/multichain/account-list-menu/index.scss
+++ b/ui/components/multichain/account-list-menu/index.scss
@@ -1,10 +1,13 @@
 .multichain-account-menu-popover {
+  &__dialog {
+    max-height: 100%;
+  }
+
   .popover-content {
     border-radius: 0;
   }
 
   &__list {
-    max-height: 200px;
     overflow: auto;
   }
 }