fix chat mobile cutoff

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}

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>

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 ?? []}/>
 					}

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}