fix: orphan centering — switch inner grid to flex-wrap + justify-center
CSS grid + mx-auto centers the whole block but not orphan tiles within their row (e.g. 5 tiles @1685x1342, the 2-tile row was left-aligned). Switched to display:flex; flex-wrap:wrap; justify-content:center with explicit width/height on each tile wrapper. This naturally centers every row, including orphan rows with fewer tiles. The computeUniformGrid algorithm is unchanged — still uniform px tile sizes with aspect flexing in [3:4..16:9].
This commit is contained in:
parent
4b1e209262
commit
8bcc3ac918
1 changed files with 5 additions and 3 deletions
|
|
@ -295,10 +295,12 @@
|
|||
class="min-h-0 flex-1 overflow-y-auto">
|
||||
{#if tileGrid}
|
||||
<div
|
||||
class="mx-auto grid content-start gap-2"
|
||||
style={`grid-template-columns: repeat(${tileGrid.cols}, ${tileGrid.tileWidth}px); grid-template-rows: repeat(${tileGrid.rows}, ${tileGrid.tileHeight}px)`}>
|
||||
class="flex flex-wrap justify-center gap-2"
|
||||
style={`max-width: ${tileGrid.cols * tileGrid.tileWidth + (tileGrid.cols - 1) * 8}px`}>
|
||||
{#each videoTiles as tile (tileKey(tile))}
|
||||
<div class="overflow-hidden rounded-2xl">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl shrink-0"
|
||||
style={`width: ${tileGrid.tileWidth}px; height: ${tileGrid.tileHeight}px`}>
|
||||
{@render videoTile(tile, "default")}
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
|||
Loading…
Reference in a new issue