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

fix: video grid wrapping and mobile height constraints

Browse source 
- flex-nowrap on grid rows prevents subpixel rounding from wrapping the
  second tile onto a new row (caused 'half off screen' on desktop)
- flex flex-col on mobile wrapper gives the grid container a constrained
  height so it renders at narrow viewport widths
This commit is contained in:
mplorentz 2026-08-12 12:49:03 -04:00
parent 972425a4b7
commit 1df2b8f7b8
1 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -278,7 +278,7 @@
.slice(0, rowIndex) .slice(0, rowIndex)
.reduce((sum, r) => sum + r.columnCount, 0)} .reduce((sum, r) => sum + r.columnCount, 0)}
<div <div
class="flex flex-wrap justify-center gap-2" class="flex flex-nowrap justify-center gap-2"
style={`max-width: ${row.columnCount * row.tileWidth + (row.columnCount - 1) * 8}px`}> style={`max-width: ${row.columnCount * row.tileWidth + (row.columnCount - 1) * 8}px`}>
{#each videoTiles.slice(offset, offset + row.columnCount) as tile (tileKey(tile))} {#each videoTiles.slice(offset, offset + row.columnCount) as tile (tileKey(tile))}
<div <div
@ -305,7 +305,7 @@
<div class={panelChrome}> <div class={panelChrome}>
{#if mobile} {#if mobile}
<div class="flex min-h-0 flex-1 flex-col gap-2"> <div class="flex min-h-0 flex-1 flex-col gap-2">
<div class="min-h-0 flex-1 overflow-hidden"> <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
{@render videoPanelBody()} {@render videoPanelBody()}
</div> </div>
<div class="shrink-0 pb-2"> <div class="shrink-0 pb-2">