From 363e4a2ff41c3541b7ba90513a69a47b7c2c9760 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 25 Nov 2024 18:00:57 +0100
Subject: [PATCH] fix: text overflow on project users access page

---
 .../common/Table/cells/RoleCell/RoleCell.tsx  |  1 +
 .../common/TooltipLink/TooltipLink.tsx        | 37 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/common/Table/cells/RoleCell/RoleCell.tsx b/frontend/src/component/common/Table/cells/RoleCell/RoleCell.tsx
index 919762bcaa0a..91677e5d87f7 100644
--- 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
index 6ff84e268d68..528a72b18a3d 100644
--- a/frontend/src/component/common/TooltipLink/TooltipLink.tsx
+++ b/frontend/src/component/common/TooltipLink/TooltipLink.tsx
@@ -6,21 +6,32 @@ 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 = ({
@@ -28,10 +39,16 @@ export const TooltipLink = ({
     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>