fix: text overflow on project users access page

Unleash · Nov 25, 2024 · 363e4a2 · 363e4a2
1 parent d75c63b
commit 363e4a2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/frontend/src/component/common/Table/cells/RoleCell/RoleCell.tsx b/frontend/src/component/common/Table/cells/RoleCell/RoleCell.tsx
@@ -49,6 +49,7 @@ export const RoleCell: VFC<TRoleCellProps> = ({ role, roles, value }) => {
                             ))}
                         </StyledRoleDescriptions>
                     }
+                    clampText
                 >
                     {value}
                 </TooltipLink>

diff --git a/frontend/src/component/common/TooltipLink/TooltipLink.tsx b/frontend/src/component/common/TooltipLink/TooltipLink.tsx
@@ -6,32 +6,49 @@ import {
 } from '../HtmlTooltip/HtmlTooltip';
 
 const StyledLink = styled(Link, {
-    shouldForwardProp: (prop) => prop !== 'highlighted',
-})<{ highlighted?: boolean }>(({ theme, highlighted }) => ({
-    backgroundColor: highlighted ? theme.palette.highlight : 'transparent',
-    color: theme.palette.text.primary,
-    textDecorationColor: theme.palette.text.disabled,
-    textDecorationStyle: 'dashed',
-    textUnderlineOffset: theme.spacing(0.5),
-    whiteSpace: 'nowrap',
-}));
+    shouldForwardProp: (prop) => prop !== 'highlighted' && prop !== 'clampText',
+})<{ highlighted?: boolean; clampText?: boolean }>(
+    ({ theme, highlighted, clampText }) => ({
+        backgroundColor: highlighted ? theme.palette.highlight : 'transparent',
+        color: theme.palette.text.primary,
+        textDecorationColor: theme.palette.text.disabled,
+        textDecorationStyle: 'dashed',
+        textUnderlineOffset: theme.spacing(0.5),
+        whiteSpace: 'nowrap',
+        ...(clampText
+            ? {
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  maxWidth: '100%',
+                  display: 'block',
+              }
+            : {}),
+    }),
+);
 
 interface ITooltipLinkProps extends LinkProps {
     tooltip: ReactNode;
     highlighted?: boolean;
     tooltipProps?: Omit<IHtmlTooltipProps, 'title' | 'children'>;
     children: ReactNode;
+    clampText?: boolean;
 }
 
 export const TooltipLink = ({
     tooltip,
     highlighted,
     tooltipProps,
     children,
+    clampText,
     ...props
 }: ITooltipLinkProps) => (
     <HtmlTooltip title={tooltip} {...tooltipProps} arrow>
-        <StyledLink tabIndex={0} highlighted={highlighted} {...props}>
+        <StyledLink
+            tabIndex={0}
+            highlighted={highlighted}
+            clampText={clampText}
+            {...props}
+        >
             {children}
         </StyledLink>
     </HtmlTooltip>
-Original file line number
+Diff line change
@@ Expand Up @@
                                 ))}
                             </StyledRoleDescriptions>
                         }
+                        clampText
                     >
                         {value}
                     </TooltipLink>
@@ Expand Down @@