From ca7ffb97b9ed350ccf280ddd05daa3382ed28780 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Wed, 17 Jun 2026 12:45:31 +0200
Subject: [PATCH] Added page card box-shadow (#21688)

## Summary
- add a subtle left-side page card shadow in light and dark mode
- preserve the existing border-ring box shadow
- give the page card wrapper enough left padding for the shadow to
render



<img width="904" height="1116" alt="image"
src="https://github.com/user-attachments/assets/2948fe4a-81ff-4045-ad6f-c0bc9b58be26"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../ui/layout/page/components/PageCardLayout.tsx   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageCardLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageCardLayout.tsx
index 1f82db4688..f24eec16e9 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageCardLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageCardLayout.tsx
@@ -22,15 +22,19 @@ const StyledMainCardWrapper = styled.div`
   box-sizing: border-box;
   display: flex;
   flex: 1 1 0;
+  margin-left: -3px;
   min-width: 0;
-  padding-left: 1px;
+  padding-left: 4px;
   width: 0;
 `;
 
+// oxlint-disable-next-line twenty/no-hardcoded-colors
 const StyledCard = styled.div`
   background: ${themeCssVariables.background.primary};
   border-radius: 16px 0 0 0;
-  box-shadow: 0 0 0 1px ${themeCssVariables.border.color.medium};
+  box-shadow:
+    -4px 0 4px 0 rgba(0, 0, 0, 0.006),
+    0 0 0 1px ${themeCssVariables.border.color.medium};
   box-sizing: border-box;
   display: flex;
   flex: 1;
@@ -38,6 +42,12 @@ const StyledCard = styled.div`
   min-height: 0;
   overflow: hidden;
   width: 100%;
+
+  .dark & {
+    box-shadow:
+      -4px 0 4px 0 rgba(0, 0, 0, 0.03),
+      0 0 0 1px ${themeCssVariables.border.color.medium};
+  }
 `;
 
 const StyledBodyContent = styled.div`