From 098551b7b882c158bd71e4d65cc4f6375085294e Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Tue, 8 Oct 2024 20:18:15 +0530
Subject: [PATCH] fix: Invite by email table overflows in mobile viewport
 (#7273)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

##Description

- This PR solves the issue #7253
- Made the invite table mobile friendly for all media width

## Before


https://github.com/user-attachments/assets/458bd47d-38fb-4ddc-a996-c1bb3908d014

<img width="439" alt="Screenshot 2024-09-27 at 1 30 52 AM"
src="https://github.com/user-attachments/assets/2a0ba6a2-c0f6-42bb-b74d-3a3147f2e7e7">

## After

<img width="440" alt="Screenshot 2024-09-27 at 1 34 11 AM"
src="https://github.com/user-attachments/assets/d31fdeba-574a-4cd0-a61a-bb5fba656109">


https://github.com/user-attachments/assets/7a4f6f9a-7fef-42f1-a226-59a1d73767f4


> [!Note]
> I've added 2 implementations and if either doesn't follow design rules
then it can be changed-
> - Made the trash icon `accent danger`
> - When emails are long, given scroll for ease of convience.

---------

Co-authored-by: Nitin Koche <nitinkoche03@gmail.com>
---
 .../settings/SettingsWorkspaceMembers.tsx     | 114 ++++++++++++------
 1 file changed, 77 insertions(+), 37 deletions(-)

diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
index 0079fb888..63bbd6717 100644
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@@ -7,8 +7,8 @@ import {
   IconUsers,
   IconReload,
   IconMail,
-  StyledText,
   Avatar,
+  MOBILE_VIEWPORT,
 } from 'twenty-ui';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useTheme } from '@emotion/react';
@@ -53,6 +53,47 @@ const StyledTable = styled(Table)`
   margin-top: ${({ theme }) => theme.spacing(0.5)};
 `;
 
+const StyledTableRow = styled(TableRow)`
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    display: grid;
+    grid-template-columns: 3fr;
+  }
+`;
+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 StyledIconWrapper = styled.div`
+  left: 2px;
+  margin-right: ${({ theme }) => theme.spacing(2)};
+  position: relative;
+  top: 1px;
+`;
+
+const StyledScrollableTextContainer = styled.div`
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: pre-line;
+`;
+
+const StyledTextContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  max-width: max-content;
+  overflow-x: auto;
+  position: absolute;
+  @media (min-width: 360px) and (max-width: 420px) {
+    max-width: 150px;
+    margin-top: ${({ theme }) => theme.spacing(1)};
+  }
+`;
 const StyledTableHeaderRow = styled(Table)`
   margin-bottom: ${({ theme }) => theme.spacing(1.5)};
 `;
@@ -165,28 +206,25 @@ export const SettingsWorkspaceMembers = () => {
               <StyledTable key={workspaceMember.id}>
                 <TableRow>
                   <TableCell>
-                    <StyledText
-                      PrefixComponent={
-                        <Avatar
-                          avatarUrl={workspaceMember.avatarUrl}
-                          placeholderColorSeed={workspaceMember.id}
-                          placeholder={workspaceMember.name.firstName ?? ''}
-                          type="rounded"
-                          size="sm"
-                        />
-                      }
-                      text={
-                        workspaceMember.name.firstName +
+                    <StyledIconWrapper>
+                      <Avatar
+                        avatarUrl={workspaceMember.avatarUrl}
+                        placeholderColorSeed={workspaceMember.id}
+                        placeholder={workspaceMember.name.firstName ?? ''}
+                        type="rounded"
+                        size="sm"
+                      />
+                    </StyledIconWrapper>
+                    <StyledScrollableTextContainer>
+                      {workspaceMember.name.firstName +
                         ' ' +
-                        workspaceMember.name.lastName
-                      }
-                    />
+                        workspaceMember.name.lastName}
+                    </StyledScrollableTextContainer>
                   </TableCell>
                   <TableCell>
-                    <StyledText
-                      text={workspaceMember.userEmail}
-                      color={theme.font.color.secondary}
-                    />
+                    <StyledTextContainer>
+                      {workspaceMember.userEmail}
+                    </StyledTextContainer>
                   </TableCell>
                   <TableCell align={'right'}>
                     {currentWorkspaceMember?.id !== workspaceMember.id && (
@@ -225,25 +263,27 @@ export const SettingsWorkspaceMembers = () => {
               </StyledTableHeaderRow>
               {workspaceInvitations?.map((workspaceInvitation) => (
                 <StyledTable key={workspaceInvitation.id}>
-                  <TableRow gridAutoColumns={`1fr 1fr ${theme.spacing(22)}`}>
-                    <TableCell>
-                      <StyledText
-                        PrefixComponent={
-                          <IconMail
-                            size={theme.icon.size.md}
-                            stroke={theme.icon.stroke.sm}
-                          />
-                        }
-                        text={workspaceInvitation.email}
-                      />
-                    </TableCell>
-                    <TableCell align={'right'}>
+                  <StyledTableRow
+                    gridAutoColumns={`1fr 1fr ${theme.spacing(22)}`}
+                  >
+                    <StyledTableCell>
+                      <StyledIconWrapper>
+                        <IconMail
+                          size={theme.icon.size.md}
+                          stroke={theme.icon.stroke.sm}
+                        />
+                      </StyledIconWrapper>
+                      <StyledScrollableTextContainer>
+                        {workspaceInvitation.email}
+                      </StyledScrollableTextContainer>
+                    </StyledTableCell>
+                    <StyledTableCell align={'right'}>
                       <Status
                         color={'gray'}
                         text={getExpiresAtText(workspaceInvitation.expiresAt)}
                       />
-                    </TableCell>
-                    <TableCell align={'right'}>
+                    </StyledTableCell>
+                    <StyledTableCell align={'right'}>
                       <StyledButtonContainer>
                         <IconButton
                           onClick={() => {
@@ -266,8 +306,8 @@ export const SettingsWorkspaceMembers = () => {
                           Icon={IconTrash}
                         />
                       </StyledButtonContainer>
-                    </TableCell>
-                  </TableRow>
+                    </StyledTableCell>
+                  </StyledTableRow>
                 </StyledTable>
               ))}
             </Table>