Files
dekun 98b83a5f75 Fix narrow PWA layout on tablet with standalone width rules.
Allow any orientation in manifest, widen content and enable dual-column mode in installed apps on tablet viewports, with iOS display-mode fallback.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-11 09:07:48 +08:00

42 lines
1.1 KiB
TypeScript

import Header from "@/components/header";
import Footer from "@/components/footer";
import TaijiBackdrop from "@/components/layout/taiji-backdrop";
import { SITE_WIDTH, SITE_WIDTH_NARROW } from "@/components/layout/site-width";
import { cn } from "@/lib/utils";
const SHELL_WIDTH = {
default: SITE_WIDTH,
narrow: SITE_WIDTH_NARROW,
wide: SITE_WIDTH,
} as const;
export type ContentShellWidth = keyof typeof SHELL_WIDTH;
export default function PageShell({
children,
className = "",
width = "default",
}: {
children: React.ReactNode;
className?: string;
width?: ContentShellWidth;
}) {
return (
<div className="relative flex min-h-screen flex-col bg-muted/50 dark:bg-stone-950">
<TaijiBackdrop />
<Header />
<main
className={cn(
"site-content-shell mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
width === "narrow" && "site-content-shell-narrow",
SHELL_WIDTH[width],
className,
)}
>
{children}
</main>
<Footer />
</div>
);
}