UI overhaul: fonts, colors, scrollable message boxes, animated text generation status updates

layouts/LayoutDefault.tsx

@@ -100,7 +100,7 @@ export default function LayoutDefault({
       <TRPCProvider trpcClient={trpc} queryClient={queryClient}>
         <MantineProvider theme={theme}>
           <AppShell
-            header={{ height: 60 }}
+            header={{ height: 80 }}
             navbar={{
               width: 300,
               breakpoint: "sm",
@@ -109,7 +109,7 @@ export default function LayoutDefault({
             padding="lg"
           >
             <AppShell.Header>
-              <Group h="100%" px="md">
+              <Group px="md" wrap="nowrap">
                 <Burger
                   opened={opened}
                   onClick={toggle}
@@ -120,7 +120,17 @@ export default function LayoutDefault({
                   {" "}
                   <Image h={50} fit="contain" src={logoUrl} />{" "}
                 </a>
-                <Title>Token-Efficient Context Engineering</Title>
+                <Title
+                  textWrap="balance"
+                  lineClamp={1}
+                  styles={{
+                    root: {
+                      lineHeight: theme?.lineHeights?.["6xl"],
+                    },
+                  }}
+                >
+                  Token-Efficient Context Engineering
+                </Title>
               </Group>
             </AppShell.Header>
             <AppShell.Navbar p="md">

layouts/theme.ts

@@ -110,6 +110,18 @@ const theme: MantineThemeOverride = createTheme({
     "3xl": "2.25rem",
     "4xl": "3rem",
   },
+  lineHeights: {
+    xs: "1.25rem",
+    sm: "1.375rem",
+    md: "1.5rem",
+    lg: "1.75rem",
+    xl: "2rem",
+    "2xl": "2.25rem",
+    "3xl": "2.625rem",
+    "4xl": "3rem",
+    "5xl": "3.75rem",
+    "6xl": "4.5rem",
+  },
 });
 
 export default theme;