scrollable message list with sticky conversation header

layouts/LayoutDefault.tsx

@@ -2,11 +2,13 @@ import "@mantine/core/styles.css";
 import { navigate } from "vike/client/router";
 import {
   AppShell,
+  Box,
   Burger,
   Group,
   Image,
   MantineProvider,
   NavLink,
+  ScrollArea,
   Title,
 } from "@mantine/core";
 import {
@@ -137,7 +139,19 @@ export default function LayoutDefault({
               <NavLink href="/" label="Welcome" active={urlPathname === "/"} />
               <NavLinkChat key="chat-new" />
             </AppShell.Navbar>
-            <AppShell.Main> {children} </AppShell.Main>
+            <AppShell.Main
+              styles={{
+                main: {
+                  height: "100vh",
+                  overflow: "hidden",
+                },
+              }}
+            >
+              <Box h="100%" w="100%">
+                {" "}
+                {children}{" "}
+              </Box>
+            </AppShell.Main>
           </AppShell>
         </MantineProvider>
       </TRPCProvider>

pages/chat/@id/+Page.tsx

@@ -496,8 +496,8 @@ export default function ChatPage() {
   }
 
   return (
-    <Box>
+    <Box h="100%" w="100%" style={{ display: "flex", flexDirection: "column" }}>
-      <Group justify="flex-start" gap={"sm"}>
+      <Group justify="flex-start" gap={"sm"} w="100%">
         <TextInput
           inputSize="50"
           description={`Conversation #${conversationId}`}
@@ -532,7 +532,15 @@ export default function ChatPage() {
           <StatusMessage sendMessageStatus={sendMessageStatus} />
         )}
       </Group>
-      <Tabs defaultValue="message">
+      <Tabs
+        defaultValue="message"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          overflow: "hidden",
+        }}
+      >
         <Tabs.List>
           <Tabs.Tab value="message">Message</Tabs.Tab>
           <Tabs.Tab value="system-prompt">System Prompt</Tabs.Tab>
@@ -540,8 +548,11 @@ export default function ChatPage() {
           <Tabs.Tab value="facts">Facts</Tabs.Tab>
           <Tabs.Tab value="fact-triggers">Fact Triggers</Tabs.Tab>
         </Tabs.List>
-        <Tabs.Panel value="message">
+        <Tabs.Panel value="message" style={{ flex: 1, overflow: "hidden" }}>
+          <Stack gap="md" justify="space-between" h="100%">
+            <ScrollArea scrollbars="y" style={{ flex: 1 }}>
               <Messages />
+            </ScrollArea>
             <Textarea
               resize="vertical"
               placeholder="Type your message here..."
@@ -569,6 +580,7 @@ export default function ChatPage() {
                 }
               }}
             />
+          </Stack>
         </Tabs.Panel>
         <Tabs.Panel value="system-prompt">
           <Textarea