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>

components/footer.tsx

@@ -6,7 +6,7 @@ function Footer() {
   return (
     <footer className="relative z-10 flex items-center justify-center gap-1 border-t border-border/40 bg-card/70 py-4 text-xs text-muted-foreground/80">
       <div
-        className={`${SITE_WIDTH_INNER} flex items-center justify-center gap-1`}
+        className={`site-content-shell ${SITE_WIDTH_INNER} flex items-center justify-center gap-1`}
       >
         <span className="italic">心诚则灵</span>
         <span className="text-muted-foreground/60">·</span>

components/header.tsx

@@ -37,7 +37,7 @@ export default function Header() {
   return (
     <header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
       <div
-        className={`${SITE_WIDTH_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
+        className={`site-content-shell ${SITE_WIDTH_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
       >
         <Link href="/" className="flex items-center gap-2">
           <TaijiIcon />

components/layout/mode-workspace.tsx

@@ -13,7 +13,7 @@ export function ModeWorkspace({
 }) {
   return (
     <div className="py-6 lg:py-8">
-      <div className="grid gap-6 lg:grid-cols-2 lg:items-stretch lg:gap-8 xl:gap-10">
+      <div className="mode-workspace-grid grid gap-6 lg:grid-cols-2 lg:items-stretch lg:gap-8 xl:gap-10">
         <div className="grid h-full min-h-0 auto-rows-fr gap-5 lg:min-h-[calc(100vh-9rem)]">
           {children}
         </div>

components/page-shell.tsx

@@ -27,7 +27,8 @@ export default function PageShell({
       <Header />
       <main
         className={cn(
-          "mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
+          "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,
         )}

components/pwa/pwa-display-mode.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+
+/** iOS / iPad PWA 部分版本不识别 display-mode 媒体查询，用 data 属性兜底 */
+export default function PwaDisplayMode() {
+  useEffect(() => {
+    const standalone =
+      window.matchMedia("(display-mode: standalone)").matches ||
+      (window.navigator as Navigator & { standalone?: boolean }).standalone ===
+        true;
+
+    if (standalone) {
+      document.documentElement.dataset.displayMode = "standalone";
+    }
+  }, []);
+
+  return null;
+}