From 1df2b8f7b8dd6ef9d16df18f908d5631977bb5d1 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Wed, 12 Aug 2026 12:49:03 -0400
Subject: [PATCH] fix: video grid wrapping and mobile height constraints

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

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 9f5b40a8..1692e415 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -278,7 +278,7 @@
                 .slice(0, rowIndex)
                 .reduce((sum, r) => sum + r.columnCount, 0)}
               <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`}>
                 {#each videoTiles.slice(offset, offset + row.columnCount) as tile (tileKey(tile))}
                   <div
@@ -305,7 +305,7 @@
   <div class={panelChrome}>
     {#if mobile}
       <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()}
         </div>
         <div class="shrink-0 pb-2">