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>
2026-07-03 23:40:48 +00:00
parent 89e994ae05
commit b087b7e95a
3 changed files with 120 additions and 2 deletions
@@ -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;