Remove Right-Edge Gap in Table Cell Display (#5992)

fixes #5941 

![Screenshot from 2024-06-23
17-24-24](https://github.com/twentyhq/twenty/assets/59247136/ae67603a-824d-4e6b-b873-2d58e6296341)

---------

Co-authored-by: Lucas Bordeau <[email protected]>

Author: rksingh2001

packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx

@@ -53,6 +53,8 @@ const StyledTable = styled.table<{
     color: ${({ theme }) => theme.font.color.primary};
     border-right: 1px solid ${({ theme }) => theme.border.color.light};
 
+    padding: 0;
+
     text-align: left;
 
     :last-child {

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css

@@ -27,6 +27,6 @@
 .cell-base-container-soft-focus {
   background: var(--twentycrm-background-transparent-secondary);
   border-radius: var(--twentycrm-border-radius-sm);
-  outline: 1px solid var(--twentycrm-font-color-extra-light);
+  border: 1px solid var(--twentycrm-font-color-extra-light);
 }
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css

@@ -3,15 +3,12 @@
   display: flex;
   height: 100%;
   overflow: hidden;
-  padding-left: 8px;
-  padding-right: 4px;
+  padding-left: 6px;
   width: 100%;
 }
 
-.cell-display-outer-container-soft-focus {
-  background: var(--twentycrm-background-transparent-secondary);
-  border-radius: var(--twentycrm-border-radius-sm);
-  outline: 1px solid var(--twentycrm-font-color-extra-light);
+.cell-display-with-soft-focus {
+  margin: -1px;
 }
 
 .cell-display-inner-container {

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx

@@ -23,7 +23,7 @@ export const RecordTableCellDisplayContainer = ({
     onClick={onClick}
     className={clsx({
       [styles.cellDisplayOuterContainer]: true,
-      [styles.cellDisplayOuterContainerSoftFocus]: softFocus,
+      [styles.cellDisplayWithSoftFocus]: softFocus,
     })}
     ref={scrollRef}
   >

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx

@@ -4,15 +4,16 @@ import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContain
 
 export const RecordTableCellDisplayMode = ({
   children,
-}: React.PropsWithChildren<unknown>) => {
+  softFocus,
+}: React.PropsWithChildren<{ softFocus?: boolean }>) => {
   const isEmpty = useIsFieldEmpty();
 
   if (isEmpty) {
     return <></>;
   }
 
   return (
-    <RecordTableCellDisplayContainer>
+    <RecordTableCellDisplayContainer softFocus={softFocus}>
       {children}
     </RecordTableCellDisplayContainer>
   );

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx

@@ -159,6 +159,7 @@ export const RecordTableCellSoftFocusMode = ({
       <RecordTableCellDisplayContainer
         onClick={handleClick}
         scrollRef={scrollRef}
+        softFocus
       >
         {editModeContentOnly ? editModeContent : nonEditModeContent}
       </RecordTableCellDisplayContainer>