Move width adjustments to PickerNetwork component

MetaMask · Oct 13, 2023 · 24f677a · 24f677a
1 parent 8fe354f
commit 24f677a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/ui/components/component-library/picker-network/picker-network.scss b/ui/components/component-library/picker-network/picker-network.scss
@@ -3,6 +3,15 @@
 
   height: var(--picker-network-height);
 
+  &--full {
+    max-width: none;
+
+    .mm-text--ellipsis {
+      flex-grow: 1;
+      text-align: start;
+    }
+  }
+
   &:active {
     background-color: var(--color-background-default-hover);
   }

diff --git a/ui/components/component-library/picker-network/picker-network.tsx b/ui/components/component-library/picker-network/picker-network.tsx
@@ -7,6 +7,7 @@ import {
   IconColor,
   BackgroundColor,
   Display,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
@@ -38,7 +39,9 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
   ) => {
     return (
       <Box
-        className={classnames('mm-picker-network', className)}
+        className={classnames('mm-picker-network', className, {
+          'mm-picker-network--full': props.width === BlockSize.Full,
+        })}
         ref={ref}
         as="button"
         backgroundColor={BackgroundColor.backgroundAlternative}

diff --git a/ui/pages/home/index.scss b/ui/pages/home/index.scss
@@ -26,18 +26,6 @@
     padding: 0 16px;
   }
 
-  &__main-view .tabs__content {
-    .mm-picker-network {
-      max-width: none;
-      text-align:  start;
-
-      .mm-text--ellipsis {
-        flex-grow: 1;
-        text-align: start;
-      }
-    }
-  }
-
   &__main-view &__tab {
     @include H6;