diff --git a/components/room/StreamGrid.vue b/components/room/StreamGrid.vue index 4d949fb..a401708 100644 --- a/components/room/StreamGrid.vue +++ b/components/room/StreamGrid.vue @@ -58,15 +58,19 @@ const cards = computed(() => { return list }) +// Cells stretch to the available height; the video letterboxes itself with object-contain, +// so the aspect ratio is kept without forcing the page to scroll. +const base = 'grid h-full min-h-0 gap-3 auto-rows-[minmax(220px,1fr)]' + const gridClass = computed(() => { if (props.layoutMode === 'focus') { - return 'grid grid-cols-1 gap-3 lg:grid-cols-4' + return `${base} grid-cols-1 lg:grid-cols-4 lg:grid-rows-3` } const n = cards.value.length - if (n <= 1) return 'grid grid-cols-1 gap-3' - if (n === 2) return 'grid grid-cols-1 gap-3 md:grid-cols-2' - if (n <= 4) return 'grid grid-cols-1 gap-3 md:grid-cols-2' - return 'grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3' + if (n <= 1) return `${base} grid-cols-1` + if (n === 2) return `${base} grid-cols-1 md:grid-cols-2` + if (n <= 4) return `${base} grid-cols-1 md:grid-cols-2` + return `${base} grid-cols-1 md:grid-cols-2 xl:grid-cols-3` }) @@ -75,7 +79,7 @@ const gridClass = computed(() => { { />
시청할 화면을 왼쪽에서 선택하세요.
diff --git a/components/room/VideoPlayerCard.vue b/components/room/VideoPlayerCard.vue index b00fbf4..bd63449 100644 --- a/components/room/VideoPlayerCard.vue +++ b/components/room/VideoPlayerCard.vue @@ -84,11 +84,16 @@ onMounted(() => {