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

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

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);
 

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(

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>

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}
+          padding={4}
-          paddingRight={4}
-          paddingBottom={6}
           onClose={onClose}
           onBack={actionMode === '' ? null : () => setActionMode('')}
         >
           {title}
         </ModalHeader>
         {actionMode === 'add' ? (
-          <Box
+          <Box paddingLeft={4} paddingRight={4} paddingBottom={4}>
-            paddingLeft={4}
-            paddingRight={4}
-            paddingBottom={4}
-            paddingTop={0}
-          >
             <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>

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;
   }
 }