Updating NetworkListMenu component to show as many networks in the ne…

…twork list as screen realestate allows (#20801)
MetaMask · Sep 11, 2023 · e44887c · e44887c
1 parent ac810ce
commit e44887c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/ui/components/multichain/network-list-menu/index.scss b/ui/components/multichain/network-list-menu/index.scss
@@ -1,4 +1,10 @@
+.multichain-network-list-menu-content-wrapper {
+  &__dialog {
+    max-height: 100%;
+  }
+}
+
 .multichain-network-list-menu {
-  max-height: 200px;
+  max-height: 100%;
   overflow: auto;
 }
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -24,6 +24,7 @@ import ToggleButton from '../../ui/toggle-button';
 import {
   BlockSize,
   Display,
+  FlexDirection,
   JustifyContent,
   Size,
   TextColor,
@@ -177,7 +178,12 @@ export const NetworkListMenu = ({ onClose }) => {
       <ModalOverlay />
       <ModalContent
         className="multichain-network-list-menu-content-wrapper"
-        modalDialogProps={{ padding: 0 }}
+        modalDialogProps={{
+          className: 'multichain-network-list-menu-content-wrapper__dialog',
+          display: Display.Flex,
+          flexDirection: FlexDirection.Column,
+          padding: 0,
+        }}
       >
         <ModalHeader
           paddingTop={4}