Review chat UI and make it expandable

src/routes/+layout.svelte

@@ -23,14 +23,15 @@
 
 <div class="flex h-screen flex-col overflow-hidden max-w-[1540px] mx-auto">
   <Navbar />
-  <div class="flex flex-1 gap-5 overflow-hidden pt-2">
+  <div class="relative flex flex-1 gap-5 overflow-hidden pt-2">
     <LeftSidebar {mode} {activeRoom} />
     <main class="flex-1 overflow-y-auto rounded-t-xl bg-white px-10 pt-6 pb-20">
       {@render children()}
     </main>
     {#if chatEnabled}
+      <div class="shrink-0 w-80" aria-hidden="true"></div>
       <ChatSidebar
-        {chatExpanded}
+        expanded={chatExpanded}
         onToggle={() => (chatExpanded = !chatExpanded)}
       />
     {/if}

src/routes/thread/[id]/+page.svelte

@@ -97,7 +97,7 @@
           </div>
           <div class="flex-1 min-w-0">
             <div class="flex items-baseline justify-between mb-2">
-              <span class="font-semibold text-gray-900"
+              <span class="font-medium text-gray-600"
                 >{thread.op.author.name}</span
               >
               <span class="text-sm text-gray-400 ml-4 flex-shrink-0"
@@ -145,7 +145,7 @@
                 </div>
                 <div class="flex-1 min-w-0">
                   <div class="flex items-baseline justify-between mb-2">
-                    <span class="font-semibold text-gray-900"
+                    <span class="font-medium text-gray-600"
                       >{reply.author.name}</span
                     >
                     <span class="text-sm text-gray-400 ml-4 flex-shrink-0"