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

@@ -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)} />