raise screen share quality and stop the grid from overflowing

Screen share was capped by WebRTC's default ~2.5 Mbps and by window
capture resolution, and fixed aspect-video cards forced the page to
scroll. Adds minimal [sejong-rtc] logs to diagnose ICE failures.

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

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`
 })
 </script>
 
@@ -75,7 +79,7 @@ const gridClass = computed(() => {
     <RoomVideoPlayerCard
       v-for="(card, index) in cards"
       :key="card.streamId"
-      :class="layoutMode === 'focus' && index === 0 ? 'lg:col-span-3 lg:row-span-2' : ''"
+      :class="layoutMode === 'focus' && index === 0 ? 'lg:col-span-3 lg:row-span-3' : ''"
       :stream-id="card.streamId"
       :title="card.isLocal ? `${card.title} (미리보기)` : card.title"
       :media-stream="card.mediaStream"
@@ -91,7 +95,7 @@ const gridClass = computed(() => {
     />
     <div
       v-if="!cards.length"
-      class="flex min-h-[240px] items-center justify-center rounded-lg border border-dashed border-[var(--border)] text-sm text-[var(--text-muted)]"
+      class="flex items-center justify-center rounded-lg border border-dashed border-[var(--border)] text-sm text-[var(--text-muted)]"
     >
       시청할 화면을 왼쪽에서 선택하세요.
     </div>

components/room/VideoPlayerCard.vue

@@ -84,11 +84,16 @@ onMounted(() => {
 
 <template>
   <article
-    class="flex flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-black/40"
+    class="flex min-h-0 flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-black/40"
     :class="focused ? 'ring-2 ring-[var(--accent)]' : ''"
   >
-    <div class="relative aspect-video bg-black" @dblclick="emit('focus')">
-      <video ref="videoRef" class="h-full w-full object-contain" autoplay playsinline />
+    <div class="relative min-h-0 flex-1 bg-black" @dblclick="emit('focus')">
+      <video
+        ref="videoRef"
+        class="absolute inset-0 h-full w-full object-contain"
+        autoplay
+        playsinline
+      />
       <div class="pointer-events-none absolute left-2 top-2 rounded bg-black/60 px-2 py-1 text-xs">
         {{ title }} · {{ formatted }}
       </div>
@@ -119,7 +124,7 @@ onMounted(() => {
 
     <div
       v-if="focused"
-      class="flex flex-wrap items-center gap-2 border-t border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-2"
+      class="flex shrink-0 flex-wrap items-center gap-2 border-t border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-2"
     >
       <button
         type="button"
@@ -154,7 +159,7 @@ onMounted(() => {
       <p v-if="dvrError" class="w-full text-xs text-[var(--danger)]">{{ dvrError }}</p>
     </div>
 
-    <div class="flex items-center gap-2 border-t border-[var(--border)] bg-[var(--bg-panel)] px-3 py-2">
+    <div class="flex shrink-0 items-center gap-2 border-t border-[var(--border)] bg-[var(--bg-panel)] px-3 py-2">
       <button
         type="button"
         class="btn-ghost !px-2 !py-1 text-xs"