Make meeting chat displace header and footer when open.

Wrap the room chrome in a left column so the full-height chat panel pushes header, video, and toolbar together instead of only the main area.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/meet/room/show.blade.php

@@ -53,7 +53,8 @@
         </div>
     @endif
 
-    <div class="relative flex h-full flex-col">
+    <div class="flex h-full min-w-0">
+        <div class="relative flex min-h-0 min-w-0 flex-1 flex-col">
         <header class="flex shrink-0 items-center justify-between border-b border-slate-800/80 bg-slate-950/90 px-4 py-3 backdrop-blur">
             <div class="min-w-0">
                 <h1 class="truncate text-sm font-semibold">{{ $room->title }}</h1>
@@ -95,8 +96,7 @@
             </p>
         </div>
 
-        <div class="flex min-h-0 min-w-0 flex-1">
+        <main class="relative min-h-0 min-w-0 flex-1 p-4">
-            <main class="relative min-h-0 min-w-0 flex-1 p-4">
                 <div id="video-grid" class="grid h-full gap-2 sm:grid-cols-2 lg:grid-cols-3"></div>
                 <div id="screen-share" class="absolute inset-4 hidden rounded-xl bg-black"></div>
 
@@ -114,46 +114,7 @@
                         </span>
                     </template>
                 </div>
-            </main>
+        </main>
-
-            <aside x-show="chatOpen" x-cloak
-                   class="flex h-full w-80 shrink-0 flex-col overflow-hidden border-l border-slate-700/80 bg-slate-950">
-                <div class="flex items-center justify-between border-b border-slate-800 px-4 py-3">
-                    <div>
-                        <h2 class="text-sm font-semibold text-white">Meeting chat</h2>
-                        <p class="text-xs text-slate-400">Messages are visible to everyone in the call</p>
-                    </div>
-                    <button @click="chatOpen = false" type="button"
-                            class="rounded-lg p-2 text-slate-400 transition-colors hover:bg-slate-800 hover:text-white"
-                            title="Close chat">
-                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
-                    </button>
-                </div>
-                <div class="flex-1 space-y-3 overflow-y-auto px-4 py-4" id="chat-messages">
-                    @foreach ($messages as $message)
-                        @php $isOwn = $message->sender_name === $participant->display_name; @endphp
-                        <div class="meet-chat-bubble {{ $isOwn ? 'meet-chat-bubble--own' : '' }}">
-                            <div class="rounded-2xl px-3 py-2 {{ $isOwn ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-100' }}">
-                                @unless ($isOwn)
-                                    <p class="mb-0.5 text-xs font-medium text-sky-300">{{ $message->sender_name }}</p>
-                                @endunless
-                                <p class="text-sm leading-relaxed">{{ $message->body }}</p>
-                            </div>
-                            <p class="mt-1 text-[10px] text-slate-500 {{ $isOwn ? 'text-right' : '' }}">{{ $message->created_at->format('g:i A') }}</p>
-                        </div>
-                    @endforeach
-                </div>
-                <form @submit.prevent="sendChat" class="border-t border-slate-800 bg-slate-950/80 p-3">
-                    <div class="flex items-end gap-2">
-                        <input type="text" x-model="chatInput" placeholder="Write a message…"
-                               class="flex-1 rounded-xl border-slate-700 bg-slate-900 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 focus:border-indigo-500 focus:ring-indigo-500">
-                        <button type="submit"
-                                class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
-                                :disabled="!chatInput.trim()">Send</button>
-                    </div>
-                </form>
-            </aside>
-        </div>
 
         <footer class="relative shrink-0 border-t border-slate-800/80 bg-slate-950/95 px-4 py-4 backdrop-blur">
             <div class="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-2 sm:gap-3">
@@ -334,6 +295,45 @@
                 </div>
             </div>
         </div>
+        </div>
+
+        <aside x-show="chatOpen" x-cloak
+               class="flex h-full w-80 shrink-0 flex-col overflow-hidden border-l border-slate-700/80 bg-slate-950">
+            <div class="flex items-center justify-between border-b border-slate-800 px-4 py-3">
+                <div>
+                    <h2 class="text-sm font-semibold text-white">Meeting chat</h2>
+                    <p class="text-xs text-slate-400">Messages are visible to everyone in the call</p>
+                </div>
+                <button @click="chatOpen = false" type="button"
+                        class="rounded-lg p-2 text-slate-400 transition-colors hover:bg-slate-800 hover:text-white"
+                        title="Close chat">
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
+            <div class="flex-1 space-y-3 overflow-y-auto px-4 py-4" id="chat-messages">
+                @foreach ($messages as $message)
+                    @php $isOwn = $message->sender_name === $participant->display_name; @endphp
+                    <div class="meet-chat-bubble {{ $isOwn ? 'meet-chat-bubble--own' : '' }}">
+                        <div class="rounded-2xl px-3 py-2 {{ $isOwn ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-100' }}">
+                            @unless ($isOwn)
+                                <p class="mb-0.5 text-xs font-medium text-sky-300">{{ $message->sender_name }}</p>
+                            @endunless
+                            <p class="text-sm leading-relaxed">{{ $message->body }}</p>
+                        </div>
+                        <p class="mt-1 text-[10px] text-slate-500 {{ $isOwn ? 'text-right' : '' }}">{{ $message->created_at->format('g:i A') }}</p>
+                    </div>
+                @endforeach
+            </div>
+            <form @submit.prevent="sendChat" class="border-t border-slate-800 bg-slate-950/80 p-3">
+                <div class="flex items-end gap-2">
+                    <input type="text" x-model="chatInput" placeholder="Write a message…"
+                           class="flex-1 rounded-xl border-slate-700 bg-slate-900 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 focus:border-indigo-500 focus:ring-indigo-500">
+                    <button type="submit"
+                            class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
+                            :disabled="!chatInput.trim()">Send</button>
+                </div>
+            </form>
+        </aside>
     </div>
 </body>
 </html>