fix(web): make Nova chat mobile-native instead of full-screen takeover (#1021)

apps/web/app/(app)/page.tsx

@@ -562,7 +562,7 @@ export default function NewPage() {
 	const isDashboardShell =
 		viewMode === "dashboard" || (viewMode === "graph" && isMobile)
 	const isGraphMode = viewMode === "graph"
-	const showBottomNav = isMobile && !isChatView && !!session
+	const showBottomNav = isMobile && !!session
 
 	return (
 		<HotkeysProvider>

apps/web/app/layout.tsx

@@ -38,6 +38,7 @@ export const viewport: Viewport = {
 	width: "device-width",
 	initialScale: 1,
 	viewportFit: "cover",
+	interactiveWidget: "resizes-content",
 }
 
 export default function RootLayout({

apps/web/components/chat/index.tsx

@@ -19,7 +19,6 @@ import {
 } from "@ui/components/sheet"
 import { ScrollArea } from "@ui/components/scroll-area"
 import {
-	ArrowLeft,
 	Check,
 	ChevronDownIcon,
 	HistoryIcon,
@@ -97,7 +96,7 @@ export function ChatLaunchFab({
 
 export function ChatSidebar({
 	isChatOpen,
-	setIsChatOpen,
+	setIsChatOpen: _setIsChatOpen,
 	queuedMessage,
 	queuedHighlightContent,
 	onConsumeQueuedMessage,
@@ -781,8 +780,7 @@ export function ChatSidebar({
 	const isStackedInput = layout === "page"
 	const showHeaderRow = !isPageDesktop || isMobile || !isStackedInput
 	const isResponding = status === "submitted" || status === "streaming"
-	const showInputStatusStrip =
-		!isStackedInput || isResponding || messages.length > 0
+	const showInputStatusStrip = !isStackedInput
 
 	const chatHistorySheet = (
 		<Sheet
@@ -950,25 +948,13 @@ export function ChatSidebar({
 						"flex items-center justify-between px-0 z-10",
 						isPageDesktop
 							? "relative shrink-0 pt-2 pb-1"
-							: "absolute top-0 right-0 left-0 pt-4 px-4",
+							: isMobile
+								? "relative shrink-0 px-4 pt-4 pb-2"
+								: "absolute top-0 right-0 left-0 pt-4 px-4",
 						!isMobile && !isPageDesktop && "rounded-t-2xl",
 					)}
 				>
 					<div className="mr-2 flex min-w-0 flex-1 items-center gap-2">
-						{layout === "page" && isMobile && (
-							<Button
-								type="button"
-								variant="headers"
-								className="h-10! w-10! shrink-0 cursor-pointer rounded-full border-[#73737333] bg-[#0D121A] p-0!"
-								style={{
-									boxShadow: "1.5px 1.5px 4.5px 0 rgba(0, 0, 0, 0.70) inset",
-								}}
-								onClick={() => setIsChatOpen(false)}
-								aria-label="Back to memories"
-							>
-								<ArrowLeft className="size-4 text-[#737373]" />
-							</Button>
-						)}
 						{!isStackedInput && (
 							<>
 								<ChatModelSelector
@@ -1019,7 +1005,7 @@ export function ChatSidebar({
 							messages.length > 0
 								? cn(
 										"flex flex-col space-y-3 min-h-full justify-end",
-										isPageDesktop ? "pt-2" : "pt-14",
+										isPageDesktop || isMobile ? "pt-2" : "pt-14",
 									)
 								: ""
 						}
@@ -1142,7 +1128,9 @@ export function ChatSidebar({
 				className={cn(
 					"shrink-0",
 					isStackedInput &&
-						"pb-[max(1.25rem,calc(env(safe-area-inset-bottom)+1rem))] md:pb-6",
+						(isMobile
+							? "px-4 pb-2"
+							: "px-4 pb-[max(1.25rem,calc(env(safe-area-inset-bottom)+1rem))] md:pb-6"),
 				)}
 			>
 				<ChatInput
@@ -1194,35 +1182,25 @@ export function ChatSidebar({
 			className={cn(
 				"relative flex flex-col backdrop-blur-md",
 				isMobile
-					? "fixed inset-0 z-50 m-0 h-dvh w-full rounded-none pb-safe"
+					? "flex h-full min-h-0 w-full flex-1 flex-col rounded-none"
 					: isPageDesktop
 						? "flex h-full min-h-0 w-full min-w-0 flex-1 flex-col basis-0 rounded-none border-x-0"
 						: "m-4 mt-2 w-[min(450px,calc(100vw-2rem))] md:w-[380px] lg:w-[450px] rounded-2xl",
 				dmSansClassName(),
 			)}
 			style={
-				isMobile
+				isMobile || isPageDesktop
 					? undefined
-					: isPageDesktop
-						? undefined
-						: {
-								height: `calc(100vh - ${heightOffset}px)`,
-							}
+					: {
+							height: `calc(100vh - ${heightOffset}px)`,
+						}
 			}
 			initial={
-				isMobile
-					? { y: "100%", opacity: 0 }
-					: layout === "page"
-						? { opacity: 0, y: 20 }
-						: { x: "100px", opacity: 0 }
+				layout === "page" ? { opacity: 0, y: 20 } : { x: "100px", opacity: 0 }
 			}
 			animate={{ x: 0, y: 0, opacity: 1 }}
 			exit={
-				isMobile
-					? { y: "100%", opacity: 0 }
-					: layout === "page"
-						? { opacity: 0, y: 12 }
-						: { x: "100px", opacity: 0 }
+				layout === "page" ? { opacity: 0, y: 12 } : { x: "100px", opacity: 0 }
 			}
 			transition={{ duration: 0.3, ease: "easeOut", bounce: 0 }}
 		>