UX: Multichain: Set a maximum width on the network picker (#18731)

* UX: Multichain: Set a maximum width on the network picker

* Fix jest

* Document the max-width

* Adding code example to README

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/component-library/picker-network/README.mdx

@@ -18,7 +18,7 @@ The `PickerNetwork` accepts all props below as well as all [Box](/docs/component
 
 ### Label
 
-Use the `label` prop for the text content of the `PickerNetwork` component
+Use the `label` prop for the text content of the `PickerNetwork` component. For long labels set a `max-width` using a `className` and the text will truncate showing an ellipsis.
 
 <Canvas>
   <Story id="components-componentlibrary-pickernetwork--label" />
@@ -29,6 +29,7 @@ import { PickerNetwork } from '../../ui/component-library';
 <PickerNetwork label="Arbitrum One" />
 <PickerNetwork label="Polygon Mainnet" />
 <PickerNetwork label="Optimism" />
+<PickerNetwork label="BNB Smart Chain (previously Binance Smart Chain Mainnet)" style={{ maxWidth: '200px' }} />
 ```
 
 ### Src
@@ -44,4 +45,4 @@ import { PickerNetwork } from '../../ui/component-library';
 <PickerNetwork src="./images/arbitrum.svg" />
 <PickerNetwork src="./images/matic-token.png" />
 <PickerNetwork src="./images/optimism.svg" />
-```
+```

ui/components/component-library/picker-network/picker-network.stories.js

@@ -38,6 +38,11 @@ export const Label = (args) => (
     <PickerNetwork {...args} label="Arbitrum One" />
     <PickerNetwork {...args} label="Polygon Mainnet" />
     <PickerNetwork {...args} label="Optimism" />
+    <PickerNetwork
+      {...args}
+      label="BNB Smart Chain (previously Binance Smart Chain Mainnet)"
+      style={{ maxWidth: '200px' }}
+    />
   </Box>
 );
 

ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap

@@ -9,7 +9,7 @@ exports[`App Header should match snapshot 1`] = `
       class="box multichain-app-header__lock-contents box--padding-2 box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-background-default"
     >
       <button
-        class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
+        class="box mm-picker-network multichain-app-header__contents__network-picker box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
       >
         <div
           class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"

ui/components/multichain/app-header/app-header.js

@@ -309,6 +309,7 @@ export const AppHeader = ({ onClick }) => {
                 label={currentNetwork?.nickname}
                 src={currentNetwork?.rpcPrefs?.imageUrl}
                 onClick={() => dispatch(toggleNetworkMenu())}
+                className="multichain-app-header__contents__network-picker"
               />
               <MetafoxLogo
                 unsetIconHeight

ui/components/multichain/app-header/app-header.scss

@@ -29,6 +29,10 @@
       width: $width-screen-lg-min;
     }
 
+    &__network-picker {
+      max-width: 200px;
+    }
+
     &--avatar-network {
       padding: 0; // TODO: Remove once https://github.com/MetaMask/metamask-extension/pull/17006 is merged
     }