Use compact multi-column participant grid on mobile meetings.

Switch regular meeting tiles to a 2–3 column scrollable gallery with overlay labels so many participants fit on small screens without stacked full-width cards.

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

resources/css/app.css

@@ -113,6 +113,111 @@ html.meet-room-page {
     min-height: 0;
 }
 
+/* Regular meeting gallery — compact on mobile, multi-column on larger screens */
+.meet-room-page .meet-gallery-grid {
+    display: grid;
+    height: 100%;
+    min-height: 0;
+    gap: 0.5rem;
+    overflow-y: auto;
+    align-content: start;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+    .meet-room-page .meet-gallery-grid {
+        gap: 0.5rem;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (min-width: 1024px) {
+    .meet-room-page .meet-gallery-grid {
+        gap: 0.5rem;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 639px) {
+    .meet-room-page .meet-room-main {
+        padding: 0.5rem;
+        padding-bottom: 0.25rem;
+    }
+
+    .meet-room-page .meet-gallery-grid {
+        gap: 0.25rem;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .meet-room-page .meet-gallery-grid.meet-gallery-grid--many {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .meet-room-page .meet-gallery-grid.meet-gallery-grid--dense {
+        gap: 0.125rem;
+    }
+
+    .meet-room-page .meet-gallery-grid.meet-gallery-grid--solo {
+        grid-template-columns: minmax(0, 1fr);
+        place-items: center;
+    }
+
+    .meet-room-page .meet-gallery-grid [data-participant-tile] {
+        aspect-ratio: auto;
+        width: 100%;
+        border-radius: 0.5rem;
+    }
+
+    .meet-room-page .meet-gallery-grid.meet-gallery-grid--solo [data-participant-tile] {
+        max-height: min(42vh, 100%);
+    }
+
+    .meet-room-page .meet-gallery-grid [data-tile-body] {
+        flex: none;
+        width: 100%;
+        aspect-ratio: 16 / 10;
+    }
+
+    .meet-room-page .meet-gallery-grid.meet-gallery-grid--many [data-tile-body],
+    .meet-room-page .meet-gallery-grid.meet-gallery-grid--dense [data-tile-body] {
+        aspect-ratio: 1 / 1;
+    }
+
+    .meet-room-page .meet-gallery-grid [data-tile-footer] {
+        position: absolute;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 2;
+        border: 0;
+        background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.15) 55%, transparent);
+        padding: 0.875rem 0.375rem 0.25rem;
+    }
+
+    .meet-room-page .meet-gallery-grid [data-tile-name] {
+        font-size: 0.625rem;
+        line-height: 1.1;
+    }
+
+    .meet-room-page .meet-gallery-grid [data-tile-mic],
+    .meet-room-page .meet-gallery-grid [data-tile-cam],
+    .meet-room-page .meet-gallery-grid [data-tile-speaking] {
+        padding: 0.125rem;
+    }
+
+    .meet-room-page .meet-gallery-grid [data-tile-mic] svg,
+    .meet-room-page .meet-gallery-grid [data-tile-cam] svg,
+    .meet-room-page .meet-gallery-grid [data-tile-speaking] svg {
+        height: 0.625rem;
+        width: 0.625rem;
+    }
+
+    .meet-room-page .meet-gallery-grid [data-tile-avatar-circle] {
+        height: 2.25rem;
+        width: 2.25rem;
+        font-size: 0.6875rem;
+    }
+}
+
 .meet-room-page [data-tile-body] {
     position: relative;
     min-height: 0;

resources/js/meet-room.js

@@ -1999,9 +1999,22 @@ function meetRoom() {
             });
 
             this.applyStageLayout();
+            this.updateGalleryGridLayout();
             this.syncActiveSpeakers(room.activeSpeakers ?? []);
         },
 
+        updateGalleryGridLayout() {
+            const grid = document.getElementById('video-grid');
+            if (!grid || this.usesStageLayout || this.audioOnly) {
+                return;
+            }
+
+            const count = grid.querySelectorAll('[data-participant-tile]').length;
+            grid.classList.toggle('meet-gallery-grid--solo', count === 1);
+            grid.classList.toggle('meet-gallery-grid--many', count >= 5);
+            grid.classList.toggle('meet-gallery-grid--dense', count >= 9);
+        },
+
         pruneTilesFromSession() {
             const joinedIds = new Set(
                 this.sessionParticipants

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

@@ -317,10 +317,10 @@
             </p>
         </div>
 
-        <main class="relative flex min-h-0 min-w-0 flex-1 flex-col p-4 pb-2">
+        <main class="relative flex min-h-0 min-w-0 flex-1 flex-col p-4 pb-2 meet-room-main">
                 <div id="meet-stage" class="flex h-full min-h-0 flex-1 flex-col gap-3" :class="usesStageLayout ? 'meet-stage meet-stage--' + stageLayout : ''">
                     <div id="meet-stage-spotlight" class="meet-stage-spotlight relative min-h-0 flex-1 overflow-hidden rounded-xl bg-slate-900"></div>
-                    <div id="video-grid" class="grid min-h-0 gap-2 sm:grid-cols-2 lg:grid-cols-3" :class="audioOnly ? 'meet-audio-grid' : (usesStageLayout ? 'meet-stage-panel-grid flex-1' : 'h-full')"></div>
+                    <div id="video-grid" class="min-h-0 h-full" :class="audioOnly ? 'meet-audio-grid' : (usesStageLayout ? 'meet-stage-panel-grid flex-1' : 'meet-gallery-grid')"></div>
                     <div id="meet-audience-strip" class="meet-audience-strip shrink-0"></div>
                 </div>
                 <div id="screen-share" class="absolute inset-4 hidden rounded-xl bg-black"></div>