From 5a362d4c9bb202519ba708fced1faaa658eff765 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <gzdunek@users.noreply.github.com>
Date: Fri, 15 Nov 2024 18:30:33 +0100
Subject: [PATCH] Fix overflow issues for username and cluster name in profile
 switcher (#48964)

* 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
---
 web/packages/teleterm/src/ui/TopBar/Identity/Identity.story.tsx | 2 +-
 web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx       | 1 +
 .../src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx    | 2 +-
 3 files changed, 3 insertions(+), 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
index 0d232404e0e57..99fc066de588f 100644
--- 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
index ce6552985d4f9..c329ff26945c7 100644
--- 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
index f02e83e641a81..6725d53ffec5b 100644
--- 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>