From ac7f1db62c3bc11ed0de4a9a5ab883d28c206054 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Fri, 1 May 2026 12:45:20 +0200
Subject: [PATCH] fix(mobile): add horizontal padding to mobile shell main

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>
---
 src/components/layout/mobile/mobile-layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/mobile/mobile-layout.tsx b/src/components/layout/mobile/mobile-layout.tsx
index 9bac103..e3b3d2f 100644
--- a/src/components/layout/mobile/mobile-layout.tsx
+++ b/src/components/layout/mobile/mobile-layout.tsx
@@ -21,7 +21,7 @@ export function MobileLayout({ children }: { children: ReactNode }) {
     <div data-shell="mobile" className="min-h-screen bg-background">
       <MobileLayoutProvider>
         <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}
         </main>
         <MobileBottomTabs onMoreClick={() => setMoreOpen(true)} />