From 1064ae835bd97db423f73c55cdf84f8c2bcf75f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Tue, 28 Jul 2026 13:30:19 +0200
Subject: [PATCH] Remove ugly page card top-left rounded corner on mobile
 (#23414)

On mobile the main page card kept the desktop styling that makes it look
attached to the navigation drawer: a rounded top-left corner
(`border-radius: lg 0 0 0`) and a 1px ring box-shadow. Since the drawer
isn't rendered inline on mobile, the card is full-bleed and the rounded
corner plus hairline border look out of place.

Changes in `PageCardLayout`:
- Card: `border-radius: 0` and `box-shadow: none` below
`MOBILE_VIEWPORT`, including the `.dark` override which would otherwise
win on specificity
- Wrapper: drop the `-3px` margin-left / `4px` padding-left that
reserved the drawer seam

Verified in the running app at 390px width on both the record show page
and the record index, in light and dark mode: no full-width element
carries a shadow or top-left radius anymore.


---
_Generated by [Claude
Code](https://claude.ai/code/session_01N6LfZg7JZ2FiYiJ9QcNucj)_

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23414?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
---
 .../ui/layout/page/components/PageCardLayout.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

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 3a0387b85d..63c28c44f8 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
@@ -1,7 +1,7 @@
 import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type PageCardLayoutProps = {
   header: ReactNode;
@@ -33,6 +33,11 @@ const StyledMainCardWrapper = styled.div`
   padding-left: 4px;
   width: 0;
 
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    margin-left: 0;
+    padding-left: 0;
+  }
+
   @media print {
     display: block;
     margin-left: 0;
@@ -63,6 +68,15 @@ const StyledCard = styled.div`
       0 0 0 1px ${themeCssVariables.border.color.medium};
   }
 
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    border-radius: 0;
+    box-shadow: none;
+
+    .dark & {
+      box-shadow: none;
+    }
+  }
+
   @media print {
     border-radius: 0;
     box-shadow: none;