From 995887aa927d9622dfdead0ddc1a2e6ade7fccc0 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 8 May 2023 09:50:13 -0500
Subject: [PATCH] UX: Multichain: Ensure network picker renders properly for
 long and short names (#18974)

* UX: Multichain: Ensure network picker renders properly for long and short network names

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* Fix jest issue

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 .../__snapshots__/app-header.test.js.snap     | 36 ++++++++++---------
 .../multichain/app-header/app-header.js       | 35 +++++++++++-------
 .../multichain/app-header/app-header.scss     |  2 +-
 3 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index 81e4fd326..d4cb98b3c 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -8,24 +8,26 @@ exports[`App Header should match snapshot 1`] = `
     <div
       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 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"
+      <div>
+        <button
+          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"
         >
-          G
-        </div>
-        <p
-          class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
-        >
-          Goerli
-        </p>
-        <span
-          class="box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-icon-default"
-          style="mask-image: url('./images/icons/arrow-down.svg');"
-        />
-      </button>
+          <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"
+          >
+            G
+          </div>
+          <p
+            class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          >
+            Goerli
+          </p>
+          <span
+            class="box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-icon-default"
+            style="mask-image: url('./images/icons/arrow-down.svg');"
+          />
+        </button>
+      </div>
       <div
         class="app-header__logo-container app-header__logo-container--clickable"
         data-testid="app-header-logo"
diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js
index 4a5579130..458e42139 100644
--- a/ui/components/multichain/app-header/app-header.js
+++ b/ui/components/multichain/app-header/app-header.js
@@ -161,13 +161,18 @@ export const AppHeader = ({ onClick }) => {
                 onClick={networkOpenCallback}
                 display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop
               />
-              <PickerNetwork
-                label={currentNetwork?.nickname}
-                src={currentNetwork?.rpcPrefs?.imageUrl}
-                onClick={networkOpenCallback}
-                display={[DISPLAY.NONE, DISPLAY.FLEX]} // show on desktop hide on popover
-                className="multichain-app-header__contents__network-picker"
-              />
+              {popupStatus ? null : (
+                <div>
+                  <PickerNetwork
+                    margin={2}
+                    label={currentNetwork?.nickname}
+                    src={currentNetwork?.rpcPrefs?.imageUrl}
+                    onClick={networkOpenCallback}
+                    display={[DISPLAY.NONE, DISPLAY.FLEX]} // show on desktop hide on popover
+                    className="multichain-app-header__contents__network-picker"
+                  />
+                </div>
+              )}
               {showProductTour &&
               popupStatus &&
               multichainProductTourStep === 1 ? (
@@ -316,12 +321,16 @@ export const AppHeader = ({ onClick }) => {
               padding={2}
               gap={2}
             >
-              <PickerNetwork
-                label={currentNetwork?.nickname}
-                src={currentNetwork?.rpcPrefs?.imageUrl}
-                onClick={() => dispatch(toggleNetworkMenu())}
-                className="multichain-app-header__contents__network-picker"
-              />
+              {popupStatus ? null : (
+                <div>
+                  <PickerNetwork
+                    label={currentNetwork?.nickname}
+                    src={currentNetwork?.rpcPrefs?.imageUrl}
+                    onClick={() => dispatch(toggleNetworkMenu())}
+                    className="multichain-app-header__contents__network-picker"
+                  />
+                </div>
+              )}
               <MetafoxLogo
                 unsetIconHeight
                 onClick={async () => {
diff --git a/ui/components/multichain/app-header/app-header.scss b/ui/components/multichain/app-header/app-header.scss
index 1bf3cbd82..e7a341711 100644
--- a/ui/components/multichain/app-header/app-header.scss
+++ b/ui/components/multichain/app-header/app-header.scss
@@ -30,7 +30,7 @@
     }
 
     &__network-picker {
-      max-width: 200px;
+      max-width: 250px;
     }
 
     &--avatar-network {