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

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

@ -229,7 +229,7 @@
class={cx( class={cx(
"relative isolate overflow-hidden rounded-2xl shadow-sm", "relative isolate overflow-hidden rounded-2xl shadow-sm",
layout === "spotlight" && "min-h-0 flex-1", 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", layout === "strip" && "aspect-video w-44 shrink-0",
tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-surface", tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-surface",
)}> )}>
@ -288,11 +288,12 @@
</div> </div>
{/if} {/if}
</div> </div>
{:else if useMultiGrid && tileLayout} {:else if useMultiGrid}
<div <div
bind:clientWidth={gridWidth} bind:clientWidth={gridWidth}
bind:clientHeight={gridHeight} bind:clientHeight={gridHeight}
class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto"> class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
{#if tileLayout}
{#each tileLayout.rows as row, i} {#each tileLayout.rows as row, i}
{@const start = tileLayout.rows.slice(0, i).reduce((a, r) => a + r.count, 0)} {@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"> <div class="flex min-h-0 flex-row gap-2 justify-center">
@ -303,6 +304,7 @@
{/each} {/each}
</div> </div>
{/each} {/each}
{/if}
</div> </div>
{/if} {/if}
{:else} {:else}