diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx index 63bbd6717d63..9e4a0207b078 100644 --- 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" /> - - {workspaceMember.name.firstName + - ' ' + - workspaceMember.name.lastName} + + {workspaceMember.name.firstName + ' ' + workspaceMember.name.lastName} +