letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(mobile): add horizontal padding to mobile shell main

Browse Source 
Content cards/lists were rendering edge-to-edge on mobile because the
mobile shell's <main> had no horizontal padding (only safe-area top/
bottom). Adds px-4 to match the breathing room desktop gets from p-6.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-05-01 12:45:20 +02:00
parent 5d44f3cfa4
commit ac7f1db62c
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/mobile/mobile-layout.tsx
View File

@@ -21,7 +21,7 @@ export function MobileLayout({ children }: { children: ReactNode }) {
<div data-shell="mobile" className="min-h-screen bg-background"> <div data-shell="mobile" className="min-h-screen bg-background">
<MobileLayoutProvider> <MobileLayoutProvider>
<MobileTopbar /> <MobileTopbar />
<main className="pt-[calc(52px+env(safe-area-inset-top))] pb-[calc(56px+env(safe-area-inset-bottom))] min-h-screen"> <main className="px-4 pt-[calc(52px+env(safe-area-inset-top))] pb-[calc(56px+env(safe-area-inset-bottom))] min-h-screen">
{children} {children}
</main> </main>
<MobileBottomTabs onMoreClick={() => setMoreOpen(true)} /> <MobileBottomTabs onMoreClick={() => setMoreOpen(true)} />