From a45d3148ac372c7e7ec8b7c3a595455eb25201ed Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Fri, 18 Oct 2024 01:07:03 +0530
Subject: [PATCH] fix: Blocklist table optimised for all viewports (#7618)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

- This PR fixes the issue #7549
- Optimised blocktable for all viewports

## Changes -

<img width="1113" alt="Screenshot 2024-10-12 at 5 11 11 PM"
src="https://github.com/user-attachments/assets/29d491da-5878-4c88-b50e-6ee6c43d5bec">



https://github.com/user-attachments/assets/d5fa063d-2819-4a9d-a9b2-e3ceefe65c8d

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/SettingsAccountsBlocklistTable.tsx    |  8 +++++---
 .../components/SettingsAccountsBlocklistTableRow.tsx | 12 +++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx
index a4c9f5306..3d513dc1e 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx
@@ -1,11 +1,10 @@
-import styled from '@emotion/styled';
-
 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
 import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
+import styled from '@emotion/styled';
 
 type SettingsAccountsBlocklistTableProps = {
   blocklist: BlocklistItem[];
@@ -28,7 +27,10 @@ export const SettingsAccountsBlocklistTable = ({
     <>
       {blocklist.length > 0 && (
         <StyledTable>
-          <TableRow>
+          <TableRow
+            gridAutoColumns="200px 1fr 20px"
+            mobileGridAutoColumns="120px 1fr 20px"
+          >
             <TableHeader>Email/Domain</TableHeader>
             <TableHeader>Added to blocklist</TableHeader>
             <TableHeader></TableHeader>
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx
index 9a1148447..30cf3a37a 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx
@@ -1,4 +1,4 @@
-import { IconX } from 'twenty-ui';
+import { IconX, OverflowingTextWithTooltip } from 'twenty-ui';
 
 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
 import { IconButton } from '@/ui/input/button/components/IconButton';
@@ -16,8 +16,14 @@ export const SettingsAccountsBlocklistTableRow = ({
   onRemove,
 }: SettingsAccountsBlocklistTableRowProps) => {
   return (
-    <TableRow key={blocklistItem.id}>
-      <TableCell>{blocklistItem.handle}</TableCell>
+    <TableRow
+      key={blocklistItem.id}
+      gridAutoColumns="200px 1fr 20px"
+      mobileGridAutoColumns="120px 1fr 20px"
+    >
+      <TableCell>
+        <OverflowingTextWithTooltip text={blocklistItem.handle} />
+      </TableCell>
       <TableCell>
         {blocklistItem.createdAt
           ? formatToHumanReadableDate(blocklistItem.createdAt)