Fix: Trim long names in Settings > Members table with ellipses and ad…

…d tooltips (twentyhq#7509).
Karankhatik · Oct 9, 2024 · bdf5311 · bdf5311
1 parent f138a1c
commit bdf5311
Showing 1 changed file with 37 additions and 22 deletions.
diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@@ -1,17 +1,19 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { isNonEmptyArray } from '@sniptt/guards';
 import { useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import {
+  AppTooltip,
+  Avatar,
   H2Title,
+  IconMail,
+  IconReload,
   IconTrash,
   IconUsers,
-  IconReload,
-  IconMail,
-  Avatar,
   MOBILE_VIEWPORT,
+  TooltipDelay
 } from 'twenty-ui';
-import { isNonEmptyArray } from '@sniptt/guards';
-import { useTheme } from '@emotion/react';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -21,26 +23,26 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
 import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
-import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { workspaceInvitationsState } from '../../modules/workspace-invitation/states/workspaceInvitationsStates';
-import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
-import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
-import { Status } from '../../modules/ui/display/status/components/Status';
 import { formatDistanceToNow } from 'date-fns';
-import { useResendWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useResendWorkspaceInvitation';
+import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
+import { Status } from '../../modules/ui/display/status/components/Status';
+import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
+import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
 import { useDeleteWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useDeleteWorkspaceInvitation';
+import { useResendWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useResendWorkspaceInvitation';
+import { workspaceInvitationsState } from '../../modules/workspace-invitation/states/workspaceInvitationsStates';
 
 const StyledButtonContainer = styled.div`
   align-items: center;
@@ -79,11 +81,16 @@ const StyledIconWrapper = styled.div`
 `;
 
 const StyledScrollableTextContainer = styled.div`
-  max-width: 100%;
-  overflow-x: auto;
-  white-space: pre-line;
+  max-width: 90px; 
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @media (max-width: ${MOBILE_VIEWPORT}px) { 
+    max-width: 60px;
+  }
 `;
 
+
 const StyledTextContainer = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
   max-width: max-content;
@@ -215,11 +222,19 @@ export const SettingsWorkspaceMembers = () => {
                         size="sm"
                       />
                     </StyledIconWrapper>
-                    <StyledScrollableTextContainer>
-                      {workspaceMember.name.firstName +
-                        ' ' +
-                        workspaceMember.name.lastName}
+                    <StyledScrollableTextContainer
+                      id={`hover-text-${workspaceMember.id}`}
+                    >
+                      {workspaceMember.name.firstName + ' ' + workspaceMember.name.lastName}
                     </StyledScrollableTextContainer>
+                    <AppTooltip
+                      anchorSelect={`#hover-text-${workspaceMember.id}`}
+                      content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
+                      noArrow
+                      place="top"
+                      positionStrategy="fixed"
+                      delay={TooltipDelay.shortDelay}
+                    />
                   </TableCell>
                   <TableCell>
                     <StyledTextContainer>