UX: Multichain: Ensure percentage of account name always shown (#18976)

* UX: Multichain: Ensure percentage of account name always shown

* Remove extra spacing between value and menu, use proposed widths

* Setup widths via storybook and props

* Remove spacing between avatar and asset value

* WIP: Setup customization for Sara, update hard-coded font sizes

* Implement final widths

* Cleanup CSS

ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap

@@ -3,10 +3,10 @@
 exports[`AccountListItem renders AccountListItem component and shows account name, address, and balance 1`] = `
 <div>
   <div
-    class="box multichain-account-list-item box--padding-4 box--display-flex box--gap-2 box--flex-direction-row box--background-color-transparent"
+    class="box multichain-account-list-item box--padding-4 box--display-flex box--flex-direction-row box--background-color-transparent"
   >
     <div
-      class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm 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"
+      class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--margin-inline-end-2 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
         class="mm-avatar-account__jazzicon"
@@ -55,13 +55,13 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
         class="box box--display-flex box--flex-direction-column"
       >
         <div
-          class="box box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between"
+          class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
         >
           <div
-            class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+            class="box mm-text multichain-account-list-item__account-name mm-text--body-md mm-text--ellipsis box--margin-inline-end-2 box--flex-direction-row box--color-text-default"
           >
             <button
-              class="box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
+              class="box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name__button mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
             >
               <span
                 class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
@@ -71,29 +71,25 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             </button>
           </div>
           <div
-            class="box box--display-flex box--flex-direction-row box--align-items-center"
+            class="box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
           >
             <div
-              class="box mm-text mm-text--body-md mm-text--text-align-end box--flex-direction-row box--color-text-default"
+              class="currency-display-component"
+              title="0.006 ETH"
             >
-              <div
+              <span
-                class="currency-display-component"
+                class="currency-display-component__prefix"
-                title="0.006 ETH"
+              />
+              <span
+                class="currency-display-component__text"
               >
-                <span
+                0.006
-                  class="currency-display-component__prefix"
+              </span>
-                />
+              <span
-                <span
+                class="currency-display-component__suffix"
-                  class="currency-display-component__text"
+              >
-                >
+                ETH
-                  0.006
+              </span>
-                </span>
-                <span
-                  class="currency-display-component__suffix"
-                >
-                  ETH
-                </span>
-              </div>
             </div>
           </div>
         </div>
@@ -101,11 +97,15 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
       <div
         class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
       >
-        <p
+        <div
-          class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+          class="box box--display-flex box--flex-direction-row box--align-items-center"
         >
-          0x0dc...e7bc
+          <p
-        </p>
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+          >
+            0x0dc...e7bc
+          </p>
+        </div>
         <div
           class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
         >

ui/components/multichain/account-list-item/account-list-item.js

@@ -93,10 +93,10 @@ export const AccountListItem = ({
     <Box
       display={DISPLAY.FLEX}
       padding={4}
-      gap={2}
       backgroundColor={selected ? Color.primaryMuted : Color.transparent}
       className={classnames('multichain-account-list-item', {
         'multichain-account-list-item--selected': selected,
+        'multichain-account-list-item--connected': Boolean(connectedAvatar),
       })}
       onClick={() => {
         // Without this check, the account will be selected after
@@ -122,6 +122,7 @@ export const AccountListItem = ({
             ? AvatarAccountVariant.Blockies
             : AvatarAccountVariant.Jazzicon
         }
+        marginInlineEnd={2}
       ></AvatarAccount>
       <Box
         display={DISPLAY.FLEX}
@@ -132,15 +133,19 @@ export const AccountListItem = ({
           <Box
             display={DISPLAY.FLEX}
             justifyContent={JustifyContent.spaceBetween}
-            gap={2}
           >
-            <Text ellipsis as="div">
+            <Text
+              ellipsis
+              as="div"
+              className="multichain-account-list-item__account-name"
+              marginInlineEnd={2}
+            >
               <ButtonLink
                 onClick={(e) => {
                   e.stopPropagation();
                   onClick();
                 }}
-                className="multichain-account-list-item__account-name"
+                className="multichain-account-list-item__account-name__button"
                 color={Color.textDefault}
                 ellipsis
               >
@@ -157,36 +162,40 @@ export const AccountListItem = ({
                 )}
               </ButtonLink>
             </Text>
-            <Box
+            <Text
+              as="div"
+              className="multichain-account-list-item__asset"
               display={DISPLAY.FLEX}
               flexDirection={FLEX_DIRECTION.ROW}
               alignItems={AlignItems.center}
+              ellipsis
+              textAlign={TextAlign.End}
             >
-              {connectedAvatar ? (
+              <UserPreferencedCurrencyDisplay
-                <AvatarFavicon
+                ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
-                  size={Size.XS}
+                value={identity.balance}
-                  src={connectedAvatar}
+                type={SECONDARY}
-                  name={connectedAvatarName}
+              />
-                  marginInlineEnd={2}
+            </Text>
-                />
-              ) : null}
-              <Text textAlign={TextAlign.End} as="div">
-                <UserPreferencedCurrencyDisplay
-                  ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
-                  value={identity.balance}
-                  type={SECONDARY}
-                />
-              </Text>
-            </Box>
           </Box>
         </Box>
         <Box
           display={DISPLAY.FLEX}
           justifyContent={JustifyContent.spaceBetween}
         >
-          <Text variant={TextVariant.bodySm} color={Color.textAlternative}>
+          <Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
-            {shortenAddress(identity.address)}
+            {connectedAvatar ? (
-          </Text>
+              <AvatarFavicon
+                size={Size.XS}
+                src={connectedAvatar}
+                name={connectedAvatarName}
+                className="multichain-account-list-item__avatar"
+              />
+            ) : null}
+            <Text variant={TextVariant.bodySm} color={Color.textAlternative}>
+              {shortenAddress(identity.address)}
+            </Text>
+          </Box>
           <Text
             variant={TextVariant.bodySm}
             color={Color.textAlternative}

ui/components/multichain/account-list-item/index.scss

@@ -11,12 +11,35 @@
   }
 
   &__account-name {
-    &:hover,
+    max-width: 160px;
-    &:focus {
+    min-width: 80px;
-      opacity: 1;
+
+    /* Prevent the normal hover effect on Buttons */
+    &__button {
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
     }
   }
 
+  &__asset {
+    max-width: 130px;
+    min-width: 60px;
+    align-self: self-end;
+  }
+
+  /* Prevent font-size resizing to avoid conflcits for long asset and token names */
+  &__account-name button,
+  &__asset,
+  &__tooltip {
+    font-size: 14px !important;
+  }
+
+  &__avatar {
+    margin-inline-end: 2px;
+  }
+
   &__selected-indicator {
     width: 4px;
     height: calc(100% - 8px);
@@ -30,11 +53,21 @@
     flex: 1;
   }
 
-  .currency-display-component {
-    flex-wrap: nowrap;
-  }
-
   &__tooltip {
     display: inline;
   }
+
+  .currency-display-component {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: inline;
+
+    &__prefix {
+      padding-right: unset;
+    }
+
+    &__suffix {
+      font-size: 12px !important;
+    }
+  }
 }