fix: truncate wallet option title [LW-12306]

src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx

@@ -67,16 +67,24 @@ export const WalletCard = ({
 
   return (
     <Flex>
-      {profile ? (
-        getProfileImage(profile, testId)
-      ) : (
-        <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
-      )}
+      <Box className={cx.profileBox}>
+        {profile ? (
+          getProfileImage(profile, testId)
+        ) : (
+          <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
+        )}
+      </Box>
       {subtitle ? (
-        <Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
-          <Title color="secondary" data-testid={makeTestId(testId, '-title')}>
-            {title.text}
-          </Title>
+        <Flex className={cx.titleBox} flexDirection="column" ml="$10" h="$32">
+          <Box w="$fill">
+            <Title
+              className={cx.title}
+              color="secondary"
+              data-testid={makeTestId(testId, '-title')}
+            >
+              {title.text}
+            </Title>
+          </Box>
           <Box
             className={cn(cx.subtitleBox, {
               [cx.subtitleButtonOffset]: title.type === 'button',
@@ -92,8 +100,9 @@ export const WalletCard = ({
           </Box>
         </Flex>
       ) : (
-        <Flex ml="$10" h="$32" alignItems="center">
+        <Flex className={cx.titleBox} ml="$10" h="$32" alignItems="center">
           <Text.Body.Small
+            className={cx.title}
             weight="$semibold"
             color="secondary"
             data-testid={makeTestId(testId, '-title')}

src/design-system/profile-dropdown/profile-dropdown-wallet-card.css.ts

@@ -1,5 +1,22 @@
 import { style } from '../../design-tokens';
 
+export const profileBox = style({
+  flexShrink: 0, // ensure it doesn't shrink
+});
+
+export const titleBox = style({
+  minWidth: 0, // ensure it doesn't overflow parent container width
+});
+
+// Truncate title with ellipsis when it would overflow parent container
+// https://css-tricks.com/using-flexbox-and-text-ellipsis-together/
+export const title = style({
+  display: 'block',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+});
+
 export const subtitleBox = style({
   position: 'relative',
 });

src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx

@@ -5,6 +5,7 @@ import ChevronRight from '@icons/ChevronRightThinComponent';
 import EditComponent from '@icons/EditComponent';
 import classNames from 'classnames';
 
+import { Box } from '../box';
 import { Icon as IconButton } from '../control-buttons';
 import { Flex } from '../flex';
 
@@ -44,47 +45,51 @@ export const WalletOption = ({
       className={classNames(cx.button, cx.container, className)}
       data-testid="wallet-option-item"
     >
-      <Flex alignItems="center" justifyContent="space-between" w="$fill">
-        <WalletCard
-          profile={profile}
-          title={{
-            text: title,
-            type: 'content',
-          }}
-          subtitle={subtitle}
-          type={type}
-          testId="wallet-option"
-        />
-        <Flex ml="$10" gap="$4">
-          {onOpenEditWallet && (
-            <Flex w="$24" h="$24" alignItems="center" justifyContent="center">
-              <IconButton
-                onClick={(event): void => {
-                  onOpenEditWallet?.();
-                  event.stopPropagation();
-                }}
-                icon={<EditComponent />}
-                size="extraSmall"
-                as="div"
-                testId="wallet-option-edit-wallet-button"
-              />
-            </Flex>
-          )}
-          {type !== 'shared' && onOpenAccountsMenu && (
-            <Flex w="$24" h="$24" alignItems="center" justifyContent="center">
-              <IconButton
-                onClick={(event): void => {
-                  onOpenAccountsMenu?.();
-                  event.stopPropagation();
-                }}
-                icon={<ChevronRight />}
-                size="extraSmall"
-                as="div"
-                testId="wallet-option-accounts-menu-button"
-              />
-            </Flex>
-          )}
-        </Flex>
+      <Flex alignItems="center" w="$fill">
+        <Box className={cx.walletCard}>
+          <WalletCard
+            profile={profile}
+            title={{
+              text: title,
+              type: 'content',
+            }}
+            subtitle={subtitle}
+            type={type}
+            testId="wallet-option"
+          />
+        </Box>
+        <Box className={cx.walletActions}>
+          <Flex ml="$10" gap="$4">
+            {onOpenEditWallet && (
+              <Flex w="$24" h="$24" alignItems="center" justifyContent="center">
+                <IconButton
+                  onClick={(event): void => {
+                    onOpenEditWallet?.();
+                    event.stopPropagation();
+                  }}
+                  icon={<EditComponent />}
+                  size="extraSmall"
+                  as="div"
+                  testId="wallet-option-edit-wallet-button"
+                />
+              </Flex>
+            )}
+            {type !== 'shared' && onOpenAccountsMenu && (
+              <Flex w="$24" h="$24" alignItems="center" justifyContent="center">
+                <IconButton
+                  onClick={(event): void => {
+                    onOpenAccountsMenu?.();
+                    event.stopPropagation();
+                  }}
+                  icon={<ChevronRight />}
+                  size="extraSmall"
+                  as="div"
+                  testId="wallet-option-accounts-menu-button"
+                />
+              </Flex>
+            )}
+          </Flex>
+        </Box>
       </Flex>
     </button>
   );

src/design-system/profile-dropdown/profile-dropdown-wallet-option.css.ts

@@ -2,6 +2,15 @@ import { sx, style, vars } from '../../design-tokens';
 
 export const button = style({});
 
+export const walletCard = style({
+  flex: '1', // make sure the title etc uses all available space
+  minWidth: 0, // make sure it doesn't overflow width
+});
+
+export const walletActions = style({
+  flex: '0', // wallet action buttons should take up as little space as possible
+});
+
 export const container = style([
   sx({
     height: '$48',

src/design-system/profile-dropdown/profile-dropdown-wallet-option.stories.tsx

@@ -66,15 +66,14 @@ export const Overview = (): JSX.Element => (
             <Variants.Row>
               <Variants.Cell>
                 <WalletOption
-                  title="Alice's wallet"
+                  title="WALLET WITH REALLY LONG NAME THAT WILL BE TRUNCATED"
                   subtitle="Account #0"
                   type="hot"
                 />
               </Variants.Cell>
               <Variants.Cell>
                 <WalletOption
-                  title="Alice's wallet"
-                  subtitle="Account #0"
+                  title="WALLET WITH REALLY LONG NAME THAT WILL BE TRUNCATED"
                   type="cold"
                 />
               </Variants.Cell>
@@ -109,8 +108,7 @@ export const Overview = (): JSX.Element => (
               </Variants.Cell>
               <Variants.Cell>
                 <WalletOption
-                  title="Alice's wallet"
-                  subtitle="Account #0"
+                  title="WALLET WITH REALLY LONG NAME THAT WILL BE TRUNCATED"
                   type="cold"
                   onOpenAccountsMenu={action('onOpenAccountsMenu')}
                   onOpenEditWallet={action('onOpenEditWallet')}