Fix token name cell (#45980)

This will prevent long token names from causing the table to jitter when
hovered. After speaking with the design team, they preferred a wrapping
of the text instead of a scroll bar for long token names (to be
consistent with other tables).

web/packages/teleport/src/JoinTokens/JoinTokens.tsx

@@ -325,25 +325,27 @@ const NameCell = ({ token }: { token: JoinToken }) => {
     <Cell
       align="left"
       style={{
-        minWidth: '320px',
+        maxWidth: '320px',
         fontFamily: 'monospace',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
       }}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
       <Flex alignItems="center" gap={2}>
         <Text
           css={`
-            text-overflow: clip;
-            overflow-x: auto;
+            overflow-wrap: break-word;
           `}
         >
           {method !== 'token' ? id : safeName}
         </Text>
-        {hovered && <CopyButton name={id} />}
+        <Box
+          css={`
+            visibility: ${hovered ? 'visible' : 'hidden'};
+          `}
+        >
+          <CopyButton name={id} />
+        </Box>
       </Flex>
     </Cell>
   );