Fix long document titles breaking connection tracker's UI

gravitational · Apr 25, 2022 · 1935f08 · 1935f08
1 parent 6017f4d
commit 1935f08
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
@@ -48,37 +48,43 @@ export function ConnectionItem(props: ConnectionItemProps) {
         height: unset;
       `}
     >
-      <ConnectionStatusIndicator mr={3} connected={props.item.connected} />
+      <ConnectionStatusIndicator
+        mr={3}
+        css={`
+          flex-shrink: 0;
+        `}
+        connected={props.item.connected}
+      />
       <Flex
         alignItems="center"
         justifyContent="space-between"
         flex="1"
-        width="100%"
         minWidth="0"
       >
-        <Flex flexDirection="column">
+        <div
+          css={`
+            min-width: 0;
+          `}
+        >
           <Text
             typography="body1"
             bold
             color="text.primary"
             title={props.item.title}
             css={`
               line-height: 16px;
-              white-space: normal;
             `}
           >
             {props.item.title}
           </Text>
           <Text
             color="text.secondary"
             typography="body2"
-            css={`
-              white-space: normal;
-            `}
+            title={props.item.clusterName}
           >
             {props.item.clusterName}
           </Text>
-        </Flex>
+        </div>
         <ButtonIcon
           mr="-3px"
           color="text.placeholder"