From 753095dfa51a82926d7c2761d1ff72f79dd0f555 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Mon, 15 Jul 2024 19:01:47 +0200
Subject: [PATCH] Add box shadow on frozen first column on table (#6250)

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/e8b39269-0c3d-4a90-9891-3f772c330165">

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/9f97e166-dfa8-44b2-86a4-db06bc7962b7">
---
 .../components/RecordTableBodyDroppable.tsx            | 10 ++++++++++
 .../components/RecordTableHeader.tsx                   | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx
index ac471112d8..bd062d3abb 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx
@@ -25,6 +25,16 @@ const StyledTbody = styled.tbody<{
       position: sticky;
       left: 39px;
       z-index: 5;
+      &::after {
+        content: '';
+        position: absolute;
+        top: -1px;
+        height: calc(100% + 2px);
+        width: 4px;
+        right: 0px;
+        box-shadow: ${({ theme }) => theme.boxShadow.light};
+        clip-path: inset(0px -4px 0px 0px);
+      }
     }
   }
 `;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
index 2804fcc6e4..34009d1542 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
@@ -39,6 +39,16 @@ const StyledTableHead = styled.thead<{
       position: sticky;
       left: 39px;
       z-index: 5;
+      &::after {
+        content: '';
+        position: absolute;
+        top: -1px;
+        height: calc(100% + 2px);
+        width: 4px;
+        right: 0px;
+        box-shadow: ${({ theme }) => theme.boxShadow.light};
+        clip-path: inset(0px -4px 0px 0px);
+      }
       @media (max-width: ${MOBILE_VIEWPORT}px) {
         width: 35px;
         max-width: 35px;