From 89b50c020f4b98d037e459d9825bdfbe9a2a77ab Mon Sep 17 00:00:00 2001
From: sid0-0 <43578323+sid0-0@users.noreply.github.com>
Date: Wed, 25 Sep 2024 21:55:58 +0530
Subject: [PATCH] Fixing last column width in table-view (#7258)

fixes: #7160

`table-layout: fixed` requires a width, added that.

Screenshots:
<img width="1509" alt="image"
src="https://github.com/user-attachments/assets/edb4f900-bc83-4aa4-bcce-85d73c0015d6">
<img width="1507" alt="image"
src="https://github.com/user-attachments/assets/79b28ad1-2a02-4d85-b991-55c545adaa36">

Small screen:
<div style="display:flex;">
<img width="40%" alt="image"
src="https://github.com/user-attachments/assets/26234bdc-163f-48ba-a04d-eef3b9112de6">
<img width="40%" alt="image"
src="https://github.com/user-attachments/assets/4fe653d1-703d-4ef6-b256-30996de1fa13">
</div>

---------

Co-authored-by: sid0-0 <a@b.com>
---
 .../object-record/record-table/components/RecordTable.tsx    | 4 +---
 .../record-table-cell/components/RecordTableTd.tsx           | 4 ++--
 .../components/RecordTableHeaderLastColumn.tsx               | 5 ++---
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
index 7f76f10a5..ccec1297b 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
@@ -13,10 +13,8 @@ import { useRecoilValue } from 'recoil';
 const StyledTable = styled.table`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   border-spacing: 0;
-  margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
   table-layout: fixed;
-
-  width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
+  width: 100%;
 `;
 
 type RecordTableProps = {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx
index 49f51197d..5aca062fb 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx
@@ -43,8 +43,8 @@ const StyledTd = styled.td<{
   ${({ freezeFirstColumns }) =>
     freezeFirstColumns
       ? `@media (max-width: ${MOBILE_VIEWPORT}px) {
-      width: 35px;
-      max-width: 35px;
+      width: 32px;
+      max-width: 32px;
     }`
       : ''}
 `;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
index 0a548ae5f..8a87fd63c 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
@@ -19,7 +19,6 @@ const StyledPlusIconHeaderCell = styled.th<{
   &:hover {
     background: ${theme.background.transparent.light};
   };
-  padding-left: ${theme.spacing(3)};
   `;
   }};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
@@ -28,12 +27,12 @@ const StyledPlusIconHeaderCell = styled.th<{
   border-left: none !important;
   color: ${({ theme }) => theme.font.color.tertiary};
   min-width: 32px;
+  width: 32px;
   border-right: none !important;
 
   ${({ isTableWiderThanScreen, theme }) =>
     isTableWiderThanScreen
       ? `
-    width: 32px;
     background-color: ${theme.background.primary};
     `
       : ''};
@@ -45,7 +44,7 @@ const StyledPlusIconContainer = styled.div`
   display: flex;
   height: 32px;
   justify-content: center;
-  width: 32px;
+  width: 100%;
 `;
 
 const HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID =