Merge pull request #74 from input-output-hk/fix/lw-12306-truncate-profile-dropdown-trigger-title

fix: truncate profile dropdown trigger title [LW-12306]

Author: DominikGuzei

src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx

@@ -48,14 +48,16 @@ export const Trigger = ({
       className={classNames(cx.button, cx.container, className)}
       data-testid={makeTestId(id)}
     >
-      <Flex alignItems="center">
-        <WalletCard
-          profile={profile}
-          title={{ text: title, type: 'button' }}
-          subtitle={subtitle}
-          type={type}
-          testId={makeTestId(id)}
-        />
+      <Flex alignItems="center" w="$fill">
+        <Box className={cx.walletcard}>
+          <WalletCard
+            profile={profile}
+            title={{ text: title, type: 'button' }}
+            subtitle={subtitle}
+            type={type}
+            testId={makeTestId(id)}
+          />
+        </Box>
 
         <Box ml="$10">
           <Flex w="$16" h="$16" alignItems="center" justifyContent="center">

src/design-system/profile-dropdown/profile-dropdown-trigger.css.ts

@@ -2,6 +2,11 @@ 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 container = style([
   sx({
     height: '$48',

src/design-system/profile-dropdown/profile-dropdown-trigger.stories.tsx

@@ -88,6 +88,24 @@ export const Overview = (): JSX.Element => (
             }}
           />
         </Flex>
+        <Flex
+          gap="$16"
+          alignItems="center"
+          w="$fill"
+          justifyContent="center"
+          mt="$16"
+        >
+          <Trigger
+            title="TRIGGER_WITH_LONG_WALLET_NAME_THAT_SHOULD_BE_TRUNCATED"
+            type="hot"
+            style={{ width: '200px' }}
+          />
+          <Trigger
+            title="TRIGGER_WITH_LONG_WALLET_NAME_THAT_SHOULD_BE_TRUNCATED"
+            type="hot"
+            style={{ width: '400px' }}
+          />
+        </Flex>
       </Section>
 
       <Divider my="$64" />