From 5755bd31843a1373916e54a55ad84c52a73f6dc7 Mon Sep 17 00:00:00 2001
From: Gregor Lohaus <lohausgregor@gmail.com>
Date: Thu, 18 Jun 2026 02:49:05 +0200
Subject: [PATCH] fix chat mobile cutoff

---
 src/app/chat/_components/ChatInterface.tsx | 2 +-
 src/app/chat/_components/Messages.tsx      | 2 +-
 src/app/chat/page.tsx                      | 4 ++--
 src/app/layout.tsx                         | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/chat/_components/ChatInterface.tsx b/src/app/chat/_components/ChatInterface.tsx
index 93440c6..b52fd7f 100644
--- a/src/app/chat/_components/ChatInterface.tsx
+++ b/src/app/chat/_components/ChatInterface.tsx
@@ -114,7 +114,7 @@ function AuthenticatedChatInterface({ dbMessages, sessionId }: ChatInterfaceProp
 				</div>
 			)}
 
-			<div className="p-4 border-t flex flex-row gap-2">
+			<div className="p-4 border-t flex flex-row gap-2 shrink-0">
 				<Textarea
 					name='message'
 					value={input}
diff --git a/src/app/chat/_components/Messages.tsx b/src/app/chat/_components/Messages.tsx
index bfbbad7..839bbf8 100644
--- a/src/app/chat/_components/Messages.tsx
+++ b/src/app/chat/_components/Messages.tsx
@@ -6,7 +6,7 @@ import { ScrollArea } from '~/components/ui/scroll-area';
 import { memo } from 'react';
 const Messages = memo(({messages,status}: { messages: UIMessage[],status:ChatStatus}) => {
   return (
-    <ScrollArea data-scroller-priority='1' className="w-full h-[90%] max-w-4xl mx-auto">
+    <ScrollArea data-scroller-priority='1' className="w-full flex-1 min-h-0 max-w-4xl mx-auto">
       {messages.map((message, i) => (
         <Card.AnimatedCard scrollOnly={true} key={i}>
           <Card.CardContent>
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index 5ec4966..e012889 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -9,11 +9,11 @@ export default function ChatPage() {
 	const {messages,session,isLoading,error} = useMessages()
 	useTimeLine(messages)
 	return (
-		<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
+		<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10 pb-4">
 					<AnimatedPageTitle position={0}>
 						<span>Talk To My </span> <span> AI-Assistant</span>
 					</AnimatedPageTitle>
-					<div className='flex items-center h-[80%] w-full my-auto w-full'>
+					<div className='flex flex-1 min-h-0 w-full'>
 					{!isLoading &&
 					<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
 					}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index df87941..1511083 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -53,7 +53,7 @@ export default async function RootLayout({
 								<MusicPlayerProvider>
 								<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
 									<TopNav />
-									<main className="absolute lg:top-10 h-screen lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
+									<main className="absolute lg:top-10 h-[100dvh] lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
 										{children}
 									</main>
 									{modal}