fix: Horizontal overflow issue

src/lib/components/mainLayout.svelte

@@ -20,32 +20,35 @@
     children: Snippet;
   }
 
+  let sidebarWidth = $state(0);
   const { data, channels, children }: Props = $props();
 </script>
 
-<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-  <div class="hidden border-r bg-muted/40 md:block">
-    <div class="flex h-full max-h-screen flex-col gap-2">
-      <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-        <a href="/" class="flex items-center gap-2 font-semibold">
-          <MessagesSquare class="h-6 w-6" />
-          <span class="">SVChat</span>
-        </a>
-        <ModeSwitcher />
-      </div>
-      <div class="flex-1">
-        <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
-          {#each channels as channelName}
-            <Channel {channelName} />
-          {/each}
-        </nav>
-      </div>
-      <div class="mt-auto p-4">
-        <ChannelDialog {data} />
+<div class="w-screen">
+  <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+    <div class="hidden border-r bg-muted/40 md:block" bind:clientWidth={sidebarWidth}>
+      <div class="flex h-full max-h-screen flex-col gap-2">
+        <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+          <a href="/" class="flex items-center gap-2 font-semibold">
+            <MessagesSquare class="h-6 w-6" />
+            <span class="">SVChat</span>
+          </a>
+          <ModeSwitcher />
+        </div>
+        <div class="flex-1">
+          <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
+            {#each channels as channelName}
+              <Channel {channelName} />
+            {/each}
+          </nav>
+        </div>
+        <div class="mt-auto p-4">
+          <ChannelDialog {data} />
+        </div>
       </div>
     </div>
-  </div>
-  <div class="max-h-screen p-2">
-    {@render children()}
+    <div class="max-h-screen p-2" style={`max-width: calc(100vw - ${sidebarWidth}px)`}>
+      {@render children()}
+    </div>
   </div>
 </div>

src/lib/components/message.svelte

@@ -9,8 +9,14 @@
       <img src={imageSrc} alt="Profile image for {user}" />
     </div>
   </div>
-  <div class="flex-col">
-    <p class="font-bold">{user}</p>
-    <p class="flex-wrap">{message}</p>
+  <div class="w-full">
+    <p class="inline-size-full break-words font-bold">{user}</p>
+    <p class="inline-size-full break-words">{message}</p>
   </div>
 </div>
+
+<style>
+  .inline-size-full {
+    inline-size: calc(100% - 64px);
+  }
+</style>