From b8ef702fa3e285d63b59ef288492de943b766e11 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Sun, 13 Oct 2024 17:12:29 +0200
Subject: [PATCH] Fix

---
 .../ui/layout/table/components/TableRow.tsx   | 13 ++-
 .../settings/SettingsWorkspaceMembers.tsx     | 79 ++++++++-----------
 2 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
index a73b21d95669..f88f2d1b36cc 100644
--- a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
@@ -1,6 +1,7 @@
-import { Link } from 'react-router-dom';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledTableRow = styled('div', {
   shouldForwardProp: (prop) =>
@@ -10,12 +11,19 @@ const StyledTableRow = styled('div', {
   onClick?: () => void;
   to?: string;
   gridAutoColumns?: string;
+  mobileGridAutoColumns?: string;
 }>`
   background-color: ${({ isSelected, theme }) =>
     isSelected ? theme.accent.quaternary : 'transparent'};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: grid;
   grid-auto-columns: ${({ gridAutoColumns }) => gridAutoColumns ?? '1fr'};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    grid-auto-columns: ${({ mobileGridAutoColumns, gridAutoColumns }) =>
+      mobileGridAutoColumns ?? gridAutoColumns ?? '1fr'};
+  }
+
   grid-auto-flow: column;
   transition: background-color
     ${({ theme }) => theme.animation.duration.normal}s;
@@ -35,6 +43,7 @@ type TableRowProps = {
   to?: string;
   className?: string;
   gridAutoColumns?: string;
+  mobileGridAutoColumns?: string;
 };
 
 export const TableRow = ({
@@ -44,12 +53,14 @@ export const TableRow = ({
   className,
   children,
   gridAutoColumns,
+  mobileGridAutoColumns,
 }: React.PropsWithChildren<TableRowProps>) => (
   <StyledTableRow
     isSelected={isSelected}
     onClick={onClick}
     gridAutoColumns={gridAutoColumns}
     className={className}
+    mobileGridAutoColumns={mobileGridAutoColumns}
     to={to}
     as={to ? Link : 'div'}
   >
diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
index 4ebac394ecd2..3ba11b7f22fb 100644
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@@ -10,7 +10,6 @@ import {
   IconMail,
   IconReload,
   IconTrash,
-  MOBILE_VIEWPORT,
   TooltipDelay,
 } from 'twenty-ui';
 
@@ -54,40 +53,20 @@ const StyledTable = styled(Table)`
   margin-top: ${({ theme }) => theme.spacing(0.5)};
 `;
 
-const StyledTableCell = styled(TableCell)`
-  padding: ${({ theme }) => theme.spacing(1)};
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    &:first-child {
-      max-width: 100%;
-      padding-top: 2px;
-      white-space: nowrap;
-      overflow: scroll;
-      scroll-behavior: smooth;
-    }
-  }
+const StyledTableHeaderRow = styled(Table)`
+  margin-bottom: ${({ theme }) => theme.spacing(1.5)};
 `;
+
 const StyledIconWrapper = styled.div`
-  left: 2px;
+  display: flex;
+  align-items: center;
   margin-right: ${({ theme }) => theme.spacing(2)};
-  position: relative;
-  top: 1px;
 `;
 
-const StyledScrollableTextContainer = styled.div`
-  white-space: nowrap;
+const StyledTextContainerWithEllipsis = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
-  width: content-fit;
-`;
-
-const StyledTextContainer = styled.div`
-  color: ${({ theme }) => theme.font.color.secondary};
-  max-width: max-content;
-  overflow-x: auto;
-  position: absolute;
-`;
-const StyledTableHeaderRow = styled(Table)`
-  margin-bottom: ${({ theme }) => theme.spacing(1.5)};
+  white-space: nowrap;
 `;
 
 export const SettingsWorkspaceMembers = () => {
@@ -187,7 +166,10 @@ export const SettingsWorkspaceMembers = () => {
           />
           <Table>
             <StyledTableHeaderRow>
-              <TableRow gridAutoColumns="150px 2fr 1fr">
+              <TableRow
+                gridAutoColumns="150px 1fr 1fr"
+                mobileGridAutoColumns="100px 1fr 1fr"
+              >
                 <TableHeader>Name</TableHeader>
                 <TableHeader>Email</TableHeader>
                 <TableHeader align={'right'}></TableHeader>
@@ -195,7 +177,10 @@ export const SettingsWorkspaceMembers = () => {
             </StyledTableHeaderRow>
             {workspaceMembers?.map((workspaceMember) => (
               <StyledTable key={workspaceMember.id}>
-                <TableRow gridAutoColumns="150px 2fr 1fr">
+                <TableRow
+                  gridAutoColumns="150px 1fr 1fr"
+                  mobileGridAutoColumns="100px 1fr 1fr"
+                >
                   <TableCell>
                     <StyledIconWrapper>
                       <Avatar
@@ -206,13 +191,13 @@ export const SettingsWorkspaceMembers = () => {
                         size="sm"
                       />
                     </StyledIconWrapper>
-                    <StyledScrollableTextContainer
+                    <StyledTextContainerWithEllipsis
                       id={`hover-text-${workspaceMember.id}`}
                     >
                       {workspaceMember.name.firstName +
                         ' ' +
                         workspaceMember.name.lastName}
-                    </StyledScrollableTextContainer>
+                    </StyledTextContainerWithEllipsis>
                     <AppTooltip
                       anchorSelect={`#hover-text-${workspaceMember.id}`}
                       content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
@@ -223,9 +208,9 @@ export const SettingsWorkspaceMembers = () => {
                     />
                   </TableCell>
                   <TableCell>
-                    <StyledTextContainer>
+                    <StyledTextContainerWithEllipsis>
                       {workspaceMember.userEmail}
-                    </StyledTextContainer>
+                    </StyledTextContainerWithEllipsis>
                   </TableCell>
                   <TableCell align={'right'}>
                     {currentWorkspaceMember?.id !== workspaceMember.id && (
@@ -256,7 +241,10 @@ export const SettingsWorkspaceMembers = () => {
           {isNonEmptyArray(workspaceInvitations) && (
             <Table>
               <StyledTableHeaderRow>
-                <TableRow gridAutoColumns={`1fr 1fr 1fr`}>
+                <TableRow
+                  gridAutoColumns="150px 1fr 1fr"
+                  mobileGridAutoColumns="100px 1fr 1fr"
+                >
                   <TableHeader>Email</TableHeader>
                   <TableHeader align={'right'}>Expires in</TableHeader>
                   <TableHeader></TableHeader>
@@ -264,25 +252,28 @@ export const SettingsWorkspaceMembers = () => {
               </StyledTableHeaderRow>
               {workspaceInvitations?.map((workspaceInvitation) => (
                 <StyledTable key={workspaceInvitation.id}>
-                  <TableRow gridAutoColumns={`1fr 1fr 1fr`}>
-                    <StyledTableCell>
+                  <TableRow
+                    gridAutoColumns="150px 1fr 1fr"
+                    mobileGridAutoColumns="100px 1fr 1fr"
+                  >
+                    <TableCell>
                       <StyledIconWrapper>
                         <IconMail
                           size={theme.icon.size.md}
                           stroke={theme.icon.stroke.sm}
                         />
                       </StyledIconWrapper>
-                      <StyledScrollableTextContainer>
+                      <StyledTextContainerWithEllipsis>
                         {workspaceInvitation.email}
-                      </StyledScrollableTextContainer>
-                    </StyledTableCell>
-                    <StyledTableCell align={'right'}>
+                      </StyledTextContainerWithEllipsis>
+                    </TableCell>
+                    <TableCell align={'right'}>
                       <Status
                         color={'gray'}
                         text={getExpiresAtText(workspaceInvitation.expiresAt)}
                       />
-                    </StyledTableCell>
-                    <StyledTableCell align={'right'}>
+                    </TableCell>
+                    <TableCell align={'right'}>
                       <StyledButtonContainer>
                         <IconButton
                           onClick={() => {
@@ -305,7 +296,7 @@ export const SettingsWorkspaceMembers = () => {
                           Icon={IconTrash}
                         />
                       </StyledButtonContainer>
-                    </StyledTableCell>
+                    </TableCell>
                   </TableRow>
                 </StyledTable>
               ))}