From 1b1e0169ff3e4700b06c03f22f29122a67c3cba8 Mon Sep 17 00:00:00 2001
From: Agent <agent@lorentz.is>
Date: Tue, 11 Aug 2026 10:21:34 -0400
Subject: [PATCH] fix: two critical rendering bugs in mixed-size grid layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug 1 — chicken-and-egg gating: '{:else if useMultiGrid && tileLayout}'
prevented the measuring container from ever mounting, because tileLayout
is undefined while gridWidth/gridHeight are 0, and the bind:clientWidth/
clientHeight are on the same div. Fix: always mount the measuring
container when useMultiGrid, gate only the rows with {#if tileLayout}.

Bug 2 — collapsed tile height: 'default' tile class lost aspect-video but
gained no replacement for intrinsic height. All children are absolutely
positioned (VideoCallTile 'absolute inset-0', profile fallback, badges,
label, pin button), so the div collapses to 0 height. Fix: add 'h-full'
to the default tile class so it fills the aspect-ratio wrapper.
---
 src/app/components/VideoCallContent.svelte | 26 ++++++++++++----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index e0789f28..bf776058 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -229,7 +229,7 @@
     class={cx(
       "relative isolate overflow-hidden rounded-2xl shadow-sm",
       layout === "spotlight" && "min-h-0 flex-1",
-      layout === "default" && "min-h-0 w-full",
+      layout === "default" && "min-h-0 h-full w-full",
       layout === "strip" && "aspect-video w-44 shrink-0",
       tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-surface",
     )}>
@@ -288,21 +288,23 @@
           </div>
         {/if}
       </div>
-    {:else if useMultiGrid && tileLayout}
+    {:else if useMultiGrid}
       <div
         bind:clientWidth={gridWidth}
         bind:clientHeight={gridHeight}
         class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
-        {#each tileLayout.rows as row, i}
-          {@const start = tileLayout.rows.slice(0, i).reduce((a, r) => a + r.count, 0)}
-          <div class="flex min-h-0 flex-row gap-2 justify-center">
-            {#each videoTiles.slice(start, start + row.count) as tile (tileKey(tile))}
-              <div class="min-w-0 flex-1" style="aspect-ratio: {row.aspectRatio}">
-                {@render videoTile(tile, "default")}
-              </div>
-            {/each}
-          </div>
-        {/each}
+        {#if tileLayout}
+          {#each tileLayout.rows as row, i}
+            {@const start = tileLayout.rows.slice(0, i).reduce((a, r) => a + r.count, 0)}
+            <div class="flex min-h-0 flex-row gap-2 justify-center">
+              {#each videoTiles.slice(start, start + row.count) as tile (tileKey(tile))}
+                <div class="min-w-0 flex-1" style="aspect-ratio: {row.aspectRatio}">
+                  {@render videoTile(tile, "default")}
+                </div>
+              {/each}
+            </div>
+          {/each}
+        {/if}
       </div>
     {/if}
   {:else}