[v17] Fix overflow issues for username and cluster name in profile sw…

…itcher (#49075) * Make identity container fill 100% width of popover to prevent user + cluster name overflow * Add min-width=0 to allow the container to shrink its content so `ProfileStatusError` doesn't overflow it * Make `profileStatusError` text longer in a story
gravitational · Nov 15, 2024 · 46c41a5 · 46c41a5
1 parent e41539e
commit 46c41a5
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/Identity.story.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/Identity.story.tsx
@@ -33,7 +33,7 @@ export default {
 
 const makeTitle = (userWithClusterName: string) => userWithClusterName;
 const profileStatusError =
-  'No YubiKey device connected with serial number 14358031';
+  'No YubiKey device connected with serial number 14358031. Connect the device and try again.';
 
 const OpenedIdentity = (props: IdentityProps) => {
   const ref = useRef<IdentityHandler>();

diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx
@@ -165,4 +165,5 @@ export const Identity = React.forwardRef<IdentityHandler, IdentityProps>(
 
 const Container = styled(Box)`
   background: ${props => props.theme.colors.levels.elevated};
+  width: 100%;
 `;
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx
@@ -58,7 +58,7 @@ export function IdentityListItem(props: {
       }}
     >
       <Flex justifyContent="space-between" alignItems="center" width="100%">
-        <Flex flexDirection="column">
+        <Flex flexDirection="column" minWidth="0">
           <Text typography="body2" title={userWithClusterName}>
             {userWithClusterName}
           </Text>