!!CHAT IS NOW CENTERED IN VIEWPORT!!

!Chat is now centered in the viewport!

web/src/lib/components/chat/Chat.svelte

@@ -6,7 +6,6 @@
 	import Patterns from "./Patterns.svelte";
 </script>
 
-<div class="mt-2 flex h-screen w-full overflow-hidden">
   <div class="flex gap-4 p-2 w-full">
     <aside class="w-1/5">
       <div class="flex flex-col gap-2">
@@ -24,5 +23,3 @@
       <ChatMessages />
     </div>
   </div>
-</div>
-

web/src/lib/components/chat/ChatInput.svelte

@@ -94,9 +94,8 @@
   });
 </script>
 
-<div class="h-full">
-  <div class="flex flex-col gap-2 h-screen">
-    <div class="flex-1 rounded-lg border-current">
+  <div class="flex flex-col gap-2 h-full">
+    <div class="flex-1 relative shadow-lg">
       <Textarea 
         bind:value={$systemPrompt}
         on:input={(e) => $systemPrompt || ''}
@@ -105,7 +104,7 @@
       />
     </div>
 
-    <div class="flex-1 py-2 relative shadow-lg">
+    <div class="flex-1 relative shadow-lg">
       <Textarea
         bind:value={userInput}
         on:input={(e) => userInput}
@@ -146,7 +145,6 @@
       </div>
     </div>
   </div>
-</div>
 
 <style>
 .flex-col {

web/src/routes/chat/+layout.svelte

@@ -1,15 +1,42 @@
 <script>
-	//import { initializeStores } from "@skeletonlabs/skeleton";
-	//initializeStores();
+  import { disableScrollHandling } from "$app/navigation";
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    disableScrollHandling();
+  });
 </script>
 
-<!-- <div class=""> -->
-	<slot />
-<!-- </div>
+<div id="page" class="page-wrapper">
+  <div class="viewport-container flex h-[calc(100vh-8rem)]">
+    <slot />
+  </div>
+</div>
 
 <style>
-	/*.chat-layout {*/
-	/*	flex-direction: column;*/
-	/*}*/
+  /* Container that enforces viewport bounds */
+  .viewport-container {
+    width: 100vw;  /* Full viewport width */
+    overflow: hidden; /* Prevent scrolling */
+    position: fixed; /* Fix position to viewport */
+    left: 0;
+  }
+
+  /* Ensure the wrapper doesn't introduce scrolling */
+  .page-wrapper :global(#page) {
+    display: block;
+    flex: none;
+    overflow: hidden;
+  }
+
+  :global(#page-content) {
+    flex: none;
+    overflow: hidden;
+  }
+
+  /* Ensure any nested content doesn't cause scrolling */
+  :global(.viewport-container *) {
+    overflow: hidden;
+  }
 </style>
- -->
+