ac7f1db62c
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>
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState, type ReactNode } from 'react';
|
|
|
|
import { MobileLayoutProvider } from './mobile-layout-provider';
|
|
import { MobileTopbar } from './mobile-topbar';
|
|
import { MobileBottomTabs } from './mobile-bottom-tabs';
|
|
import { MoreSheet } from './more-sheet';
|
|
|
|
/**
|
|
* Mobile shell: fixed compact topbar + scrollable content + fixed bottom tab
|
|
* bar. Renders only when CSS reveals it (data-shell="mobile") — both shells
|
|
* are in the DOM, see src/app/globals.css. The bottom tabs and More sheet
|
|
* derive the active port slug from the URL themselves, so this layout takes
|
|
* no portSlug prop.
|
|
*/
|
|
export function MobileLayout({ children }: { children: ReactNode }) {
|
|
const [moreOpen, setMoreOpen] = useState(false);
|
|
|
|
return (
|
|
<div data-shell="mobile" className="min-h-screen bg-background">
|
|
<MobileLayoutProvider>
|
|
<MobileTopbar />
|
|
<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)} />
|
|
<MoreSheet open={moreOpen} onOpenChange={setMoreOpen} />
|
|
</MobileLayoutProvider>
|
|
</div>
|
|
);
|
|
}
|