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>