Fix plenary stage rounding and restore the speaking ring.

Clip spotlight tiles to the stage border radius and draw the green active-speaker outline on the spotlight container so overflow hidden no longer hides it.

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

resources/css/app.css

@@ -45,6 +45,14 @@ html.meet-room-page {
     box-shadow: 0 0 0 2px rgb(52 211 153 / 0.9);
 }
 
+.meet-room-page .meet-stage-spotlight:has(.meet-tile-speaking) {
+    box-shadow: 0 0 0 2px rgb(52 211 153 / 0.9);
+}
+
+.meet-room-page .meet-stage-spotlight .meet-tile-speaking {
+    box-shadow: none;
+}
+
 .meet-room-page #meet-stage:not(.meet-stage) #meet-stage-spotlight,
 .meet-room-page #meet-stage:not(.meet-stage) #meet-audience-strip {
     display: none;
@@ -63,13 +71,34 @@ html.meet-room-page {
     min-height: 0;
     display: flex;
     flex-direction: column;
+    isolation: isolate;
+    border-radius: 0.75rem;
+    overflow: hidden;
 }
 
 .meet-room-page .meet-stage--plenary .meet-stage-spotlight-tile {
     height: 100%;
     width: 100%;
     max-height: 100%;
+    min-height: 0;
     aspect-ratio: auto;
+    border-radius: 0;
+}
+
+.meet-room-page .meet-stage-spotlight-tile [data-tile-body] {
+    overflow: hidden;
+    border-top-left-radius: 0.75rem;
+    border-top-right-radius: 0.75rem;
+}
+
+.meet-room-page .meet-stage-spotlight-tile [data-tile-footer] {
+    border-bottom-left-radius: 0.75rem;
+    border-bottom-right-radius: 0.75rem;
+}
+
+.meet-room-page .meet-stage-spotlight-tile [data-tile-stage] video {
+    border-top-left-radius: 0.75rem;
+    border-top-right-radius: 0.75rem;
 }
 
 .meet-room-page [data-participant-tile] {
@@ -99,6 +128,14 @@ html.meet-room-page {
     border-top: 1px solid rgb(30 41 59 / 0.8);
 }
 
+.meet-room-page .meet-audience-strip:empty {
+    display: none;
+    min-height: 0;
+    margin-top: 0;
+    padding: 0;
+    border-top: 0;
+}
+
 .meet-room-page .meet-stage--panel #meet-stage-spotlight,
 .meet-room-page .meet-stage--panel #meet-audience-strip {
     display: none;

resources/js/meet-room.js

@@ -836,8 +836,12 @@ function meetRoom() {
                             target.appendChild(tile);
                         }
 
-                        tile.classList.toggle('meet-stage-spotlight-tile', target === spotlight);
+                        const isSpotlightTile = target === spotlight;
+
+                        tile.classList.toggle('meet-stage-spotlight-tile', isSpotlightTile);
                         tile.classList.toggle('meet-stage-panel-tile', target === grid && this.stageLayout === 'panel');
+                        tile.classList.toggle('aspect-video', !isSpotlightTile && !this.audioOnly);
+                        tile.classList.toggle('rounded-xl', !isSpotlightTile && !this.audioOnly);
                     } else {
                         tile.remove();
                     }
@@ -1129,9 +1133,12 @@ function meetRoom() {
                 container.appendChild(tile);
             }
 
-            tile.classList.toggle('meet-stage-spotlight-tile', container.id === 'meet-stage-spotlight');
+            const isSpotlightTile = container.id === 'meet-stage-spotlight';
+
+            tile.classList.toggle('meet-stage-spotlight-tile', isSpotlightTile);
             tile.classList.toggle('meet-stage-panel-tile', container.id === 'video-grid' && this.stageLayout === 'panel');
-            tile.classList.toggle('aspect-video', container.id !== 'meet-stage-spotlight' && !this.audioOnly);
+            tile.classList.toggle('aspect-video', !isSpotlightTile && !this.audioOnly);
+            tile.classList.toggle('rounded-xl', !isSpotlightTile && !this.audioOnly);
 
             this.updateTileAvatarCircle(tile, participant);
             tile.querySelector('[data-tile-name]').textContent = this.displayNameForParticipant(participant);