matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix: two critical rendering bugs in mixed-size grid layout

Browse source 
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.
This commit is contained in:
Agent 2026-08-11 10:21:34 -04:00
parent d8dea9c4dd
commit 1b1e0169ff
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app/components/VideoCallContent.svelte
View file

@ -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}