move chat onto the side under the highlights column, make the video display larger.

index.html

@@ -15,15 +15,16 @@
         <a href="/logout" class="btn btn-outline-light btn-sm">Logout</a>
     </div>
     <div class="row">
-        <!-- Webcam Column -->
-        <div class="col-md-8 mb-4">
+        <!-- Webcam Column - Now full width -->
+        <div class="col-12 mb-4">
             <div class="text-center">
                 <h5>Live Webcam</h5>
-                <img src="{{ url_for('video_feed') }}" class="img-fluid rounded" style="max-height: 360px;">
+                <img src="{{ url_for('video_feed') }}" class="img-fluid rounded" style="max-height: 600px; width: auto;">
             </div>
         </div>
-
-        <!-- Detections Column -->
+    </div>
+    <div class="row">
+        <!-- Right Column - Highlights and Chat -->
         <div class="col-md-4 mb-4">
             <div class="sticky-top" style="top: 20px;">
                 <!-- Biome Display -->
@@ -34,20 +35,26 @@
                 <!-- Detection Timeline -->
                 <div class="mb-4">
                     <h5>Detection Highlights</h5>
-                    <div id="categorized-timeline" class="bg-secondary rounded p-3" style="max-height: 500px; overflow-y: auto;">
+                    <div id="categorized-timeline" class="bg-secondary rounded p-3" style="max-height: 300px; overflow-y: auto;">
                         <p class="text-muted">Loading detection events...</p>
                     </div>
                 </div>
+
+                <!-- Group Chat - Moved here -->
+                <div class="mb-4">
+                    <h5>Group Chat</h5>
+                    <div id="chatbox" class="bg-secondary rounded p-3 mb-3" style="height: 200px; overflow-y: scroll;"></div>
+                    <div class="input-group">
+                        <input id="message" class="form-control" placeholder="Type a message...">
+                        <button class="btn btn-primary" onclick="sendMessage()">Send</button>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-    <!-- Group Chat - Full width below -->
-    <div class="mb-4">
-<h5>Group Chat</h5>
-        <div id="chatbox" class="bg-secondary rounded p-3 mb-3" style="height: 300px; overflow-y: scroll;"></div>
-        <div class="input-group">
-            <input id="message" class="form-control" placeholder="Type a message...">
-            <button class="btn btn-primary" onclick="sendMessage()">Send</button>
+
+        <!-- Main Content Column - Empty for now -->
+        <div class="col-md-8">
+            <!-- Left empty or can be used for other content -->
         </div>
     </div>
 </div>