sdfg

static/app.js

@@ -684,6 +684,19 @@ function renderVideo(peerId, displayName, stream, source) {
       <video id="${videoId}" autoplay playsinline ${peerId === state.me.id ? "muted" : ""}></video>
       <div class="video-label">${label}</div>
     `;
+    container.onclick = () => {
+      const isFullscreen = container.classList.contains('fullscreen');
+      // Reset all
+      document.querySelectorAll('.video-item').forEach(el => el.classList.remove('fullscreen'));
+
+      if (isFullscreen) {
+        el.videoGrid.classList.remove('has-fullscreen');
+      } else {
+        container.classList.add('fullscreen');
+        el.videoGrid.classList.add('has-fullscreen');
+      }
+    };
+
     el.videoGrid.appendChild(container);
     videoEl = container.querySelector("video");
   }

static/styles.css

@@ -638,7 +638,14 @@ select {
   background: #000;
   border-radius: var(--radius-lg);
   overflow: hidden;
-  transition: box-shadow var(--transition);
+  transition: all var(--transition);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.video-item:hover {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+  z-index: 2;
 }
 
 .video-item video {
@@ -646,6 +653,37 @@ select {
   height: 100%;
   object-fit: contain;
   background: #000;
+  pointer-events: none;
+}
+
+/* Fullscreen Feed Support */
+.video-grid.has-fullscreen {
+  display: flex;
+  padding: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 48px;
+  /* Below chat-header */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  background: var(--bg-main);
+}
+
+.video-grid.has-fullscreen .video-item {
+  display: none;
+}
+
+.video-grid.has-fullscreen .video-item.fullscreen {
+  display: block;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  cursor: zoom-out;
+  z-index: 10;
+  aspect-ratio: auto;
 }
 
 .video-item .video-label {
@@ -659,6 +697,8 @@ select {
   border-radius: 100px;
   font-size: 12px;
   font-weight: 500;
+  pointer-events: none;
+  z-index: 5;
 }
 
 /* Voice Activity */
@@ -786,6 +826,7 @@ select {
 /*  Chat Pane                                                 */
 /* ═══════════════════════════════════════════════════════════ */
 .chat-pane {
+  position: relative;
   display: flex;
   flex-direction: column;
   background: var(--bg-main);