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. -->
This commit is contained in:
Félix Malfait
2026-07-28 13:30:19 +02:00
committed by GitHub
parent 897d29b603
commit 1064ae835b
@@ -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;