From 8bcc3ac918fbf656f444601faca7a32d0d58b0d8 Mon Sep 17 00:00:00 2001
From: Agent <agent@lorentz.is>
Date: Tue, 11 Aug 2026 16:30:51 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20orphan=20centering=20=E2=80=94=20switch?=
 =?UTF-8?q?=20inner=20grid=20to=20flex-wrap=20+=20justify-center?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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].
---
 src/app/components/VideoCallContent.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index e065cef9..b1597feb 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -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}