From 9d071d686a1dcb594cfe5ceea1da920c29d4b318 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Fri, 6 Feb 2026 19:43:14 +0530
Subject: [PATCH] feat: add viewport configuration for mobile keyboard handling
 and update chat page height calculations for better responsiveness

---
 .../new-chat/[[...chat_id]]/page.tsx             |  6 +++---
 surfsense_web/app/layout.tsx                     | 16 +++++++++++++++-
 surfsense_web/components/assistant-ui/thread.tsx |  5 ++++-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
index a00afb3df..22085e064 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -1408,7 +1408,7 @@ export default function NewChatPage() {
 	// Show loading state only when loading an existing thread
 	if (isInitializing) {
 		return (
-			<div className="flex h-[calc(100vh-64px)] flex-col bg-background px-4">
+			<div className="flex h-[calc(100dvh-64px)] flex-col bg-background px-4">
 				<div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8">
 					{/* User message */}
 					<div className="flex justify-end">
@@ -1449,7 +1449,7 @@ export default function NewChatPage() {
 	// For new chats (urlChatId === 0), threadId being null is expected (lazy creation)
 	if (!threadId && urlChatId > 0) {
 		return (
-			<div className="flex h-[calc(100vh-64px)] flex-col items-center justify-center gap-4">
+			<div className="flex h-[calc(100dvh-64px)] flex-col items-center justify-center gap-4">
 				<div className="text-destructive">Failed to load chat</div>
 				<button
 					type="button"
@@ -1474,7 +1474,7 @@ export default function NewChatPage() {
 			<SaveMemoryToolUI />
 			<RecallMemoryToolUI />
 			{/* <WriteTodosToolUI /> Disabled for now */}
-			<div className="flex flex-col h-[calc(100vh-64px)] overflow-hidden">
+			<div className="flex flex-col h-[calc(100dvh-64px)] overflow-hidden">
 				<Thread
 					messageThinkingSteps={messageThinkingSteps}
 					header={<ChatHeader searchSpaceId={searchSpaceId} />}
diff --git a/surfsense_web/app/layout.tsx b/surfsense_web/app/layout.tsx
index af25193ef..047baa27b 100644
--- a/surfsense_web/app/layout.tsx
+++ b/surfsense_web/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import "./globals.css";
 import { RootProvider } from "fumadocs-ui/provider/next";
 import { Roboto } from "next/font/google";
@@ -19,6 +19,20 @@ const roboto = Roboto({
 	variable: "--font-roboto",
 });
 
+/**
+ * Viewport configuration for mobile keyboard handling.
+ * - interactiveWidget: 'resizes-content' tells mobile browsers (especially Chrome Android)
+ *   to resize the CSS layout viewport when the virtual keyboard opens, so sticky elements
+ *   (like the chat input bar) stay visible above the keyboard.
+ * - viewportFit: 'cover' enables env(safe-area-inset-*) for notched/home-indicator devices.
+ */
+export const viewport: Viewport = {
+	width: "device-width",
+	initialScale: 1,
+	viewportFit: "cover",
+	interactiveWidget: "resizes-content",
+};
+
 export const metadata: Metadata = {
 	title: "SurfSense – Customizable AI Research & Knowledge Management Assistant",
 	description:
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 4c2165c0a..dc30cfe40 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -120,7 +120,10 @@ const ThreadContent: FC<{ header?: React.ReactNode }> = ({ header }) => {
 					}}
 				/>
 
-				<ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
+				<ThreadPrimitive.ViewportFooter
+					className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6"
+					style={{ paddingBottom: "max(1rem, env(safe-area-inset-bottom))" }}
+				>
 					<ThreadScrollToBottom />
 					<AssistantIf condition={({ thread }) => !thread.isEmpty}>
 						<div className="fade-in slide-in-from-bottom-4 animate-in duration-500 ease-out fill-mode-both">