From b087b7e95a61c239688378c493f4b87aabc6d637 Mon Sep 17 00:00:00 2001 From: isaacclad Date: Fri, 3 Jul 2026 23:40:48 +0000 Subject: [PATCH] Use compact multi-column participant grid on mobile meetings. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- resources/css/app.css | 105 +++++++++++++++++++++++ resources/js/meet-room.js | 13 +++ resources/views/meet/room/show.blade.php | 4 +- 3 files changed, 120 insertions(+), 2 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 870081b..6d8cde6 100644 --- a/resources/css/app.css +++ b/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; diff --git a/resources/js/meet-room.js b/resources/js/meet-room.js index d48264f..4ca4a73 100644 --- a/resources/js/meet-room.js +++ b/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 diff --git a/resources/views/meet/room/show.blade.php b/resources/views/meet/room/show.blade.php index da0ac10..5985d5f 100644 --- a/resources/views/meet/room/show.blade.php +++ b/resources/views/meet/room/show.blade.php @@ -317,10 +317,10 @@

-
+
-
+