fix: chat UI fixes

app/(app)/chats/[id]/page.tsx

@@ -33,6 +33,7 @@ import { ForwardDialog } from "@/components/chat/forward-dialog";
 import { toast } from "sonner";
 import { channelAuthorizer } from "@/lib/realtime";
 import { cn } from "@/lib/utils";
+import { useVisualViewport } from "@/lib/use-visual-viewport";
 import {
   chat,
   conversationTitle,
@@ -63,6 +64,13 @@ export default function ChatThreadPage() {
   const [menu, setMenu] = useState<{ message: ChatMessage; point: MenuPoint } | null>(null);
   const [forwarding, setForwarding] = useState<ChatMessage | null>(null);
   const [starredIds, setStarredIds] = useState<Set<string>>(new Set());
+
+  // While the keyboard is up the thread is sized from the visual viewport
+  // instead of dvh — see useVisualViewport for why dvh can't do this on iOS.
+  // Declared with the other hooks: the early return below means anything
+  // placed after it would run conditionally.
+  const viewport = useVisualViewport();
+  const keyboardOpen = viewport?.keyboardOpen ?? false;
   // Guards against two loads racing (scroll handler + the short-page effect).
   const loadingRef = useRef(false);
 
@@ -429,8 +437,30 @@ export default function ChatThreadPage() {
         // space, and calc() requires whitespace around a binary `-` — written
         // without it the whole declaration is invalid and dropped, which
         // collapses this to height:auto.
-        "h-[calc(100dvh_-_3rem_-_4rem)] sm:h-[calc(100dvh_-_3.5rem_-_4rem)] md:h-[calc(100dvh_-_3.5rem)]",
+        // Only while the keyboard is closed; otherwise the inline style below
+        // takes over and these would fight it.
+        !keyboardOpen &&
+          "h-[calc(100dvh_-_3rem_-_4rem)] sm:h-[calc(100dvh_-_3.5rem_-_4rem)] md:h-[calc(100dvh_-_3.5rem)]",
       )}
+      style={
+        keyboardOpen && viewport
+          ? {
+              // Pinned to the visible strip above the keyboard. Fixed rather
+              // than in-flow because iOS scrolls the layout viewport instead
+              // of resizing it, so an in-flow column keeps its old height and
+              // hides the composer underneath. left/right 0 with the existing
+              // mx-auto keeps the desktop column centred.
+              position: "fixed",
+              top: viewport.offsetTop,
+              left: 0,
+              right: 0,
+              height: viewport.height,
+              // Above the app's fixed bottom nav (z-40) so the composer can
+              // never be painted over by it.
+              zIndex: 50,
+            }
+          : undefined
+      }
     >
       <header className="flex items-center gap-3 border-b border-border px-4 py-3">
         <Link

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import Script from "next/script";
 import { Geist, Geist_Mono, Lora, Bricolage_Grotesque } from "next/font/google";
 import { ogDefault } from "@/lib/og";
@@ -43,6 +43,16 @@ const bricolage = Bricolage_Grotesque({
   display: "swap",
 });
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  // Ask the browser to shrink the layout viewport when the software keyboard
+  // opens, which is the native fix for a bottom-anchored composer. Chrome and
+  // Android honour it; Safari does not, which is why the chat thread also
+  // tracks window.visualViewport by hand.
+  interactiveWidget: "resizes-content",
+};
+
 export const metadata: Metadata = {
   // Resolves all relative OG/Twitter image URLs and canonical links to
   // absolute URLs (required for correct social previews + SEO; Next warns