fix: address PR review findings on mobile responsive layout

GeneralJerel · GeneralJerel · commit 0d5433b4f7dd · 2026-03-26T13:59:26.000-07:00
- Remove maximum-scale=1 from viewport meta to allow pinch-to-zoom (WCAG 2.1)
- Wrap sessionStorage access in try/catch for privacy-restricted contexts
- Add Escape key to dismiss desktop tip modal (consistent with demo gallery)
- Change tip modal breakpoint from md:hidden to sm:hidden to match layout
diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx
@@ -10,7 +10,7 @@ export default function RootLayout({children}: Readonly<{ children: React.ReactN
   return (
     <html lang="en">
       <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Open Generative UI</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪁</text></svg>" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/apps/app/src/components/desktop-tip-modal.tsx b/apps/app/src/components/desktop-tip-modal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
+import { useEffect, useSyncExternalStore } from "react";
 
 const DISMISSED_KEY = "desktop-tip-dismissed";
 
@@ -17,21 +17,34 @@ export function DesktopTipModal() {
         listeners = listeners.filter((l) => l !== listener);
       };
     },
-    () => !sessionStorage.getItem(DISMISSED_KEY),
+    () => {
+      try { return !sessionStorage.getItem(DISMISSED_KEY); }
+      catch { return false; }
+    },
     () => false,
   );
 
-  if (!notDismissed) return null;
-
   const dismiss = () => {
-    sessionStorage.setItem(DISMISSED_KEY, "1");
+    try { sessionStorage.setItem(DISMISSED_KEY, "1"); }
+    catch { /* privacy-restricted context */ }
     emitChange();
   };
 
+  useEffect(() => {
+    if (!notDismissed) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") dismiss();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  });
+
+  if (!notDismissed) return null;
+
   return (
     <div
       onClick={dismiss}
-      className="fixed inset-0 z-[9999] flex items-center justify-center p-6 md:hidden"
+      className="fixed inset-0 z-[9999] flex items-center justify-center p-6 sm:hidden"
       style={{
         background: "rgba(0,0,0,0.45)",
         backdropFilter: "blur(6px)",
@@ -50,7 +63,7 @@ export function DesktopTipModal() {
           padding: "32px 28px",
           maxWidth: 340,
           width: "100%",
-          textAlign: "center" as const,
+          textAlign: "center",
           fontFamily: "var(--font-family)",
         }}
       >
