From 91eedc0e8e8df7443d637be51d4c902764d1622f Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Tue, 12 May 2026 19:03:23 +0200
Subject: [PATCH] fix(call): aspect-video for fullscreen grid+strip, switch
 section sizing to stageLayout

---
 apps/desktop/src/components/InCallPanel.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/src/components/InCallPanel.tsx b/apps/desktop/src/components/InCallPanel.tsx
index b413f0c..9eaa867 100644
--- a/apps/desktop/src/components/InCallPanel.tsx
+++ b/apps/desktop/src/components/InCallPanel.tsx
@@ -512,10 +512,10 @@ export function InCallPanel({ conversation }: Props) {
   // Focus mode dedicates the entire call-panel vertical slot to the speaker so
   // the tile can grow in height (grid mode's 420px cap leaves it squashed).
   const sectionClass =
-    callMode === 'focus'
+    stageLayout.kind === 'focus'
       ? 'flex min-h-[420px] shrink-0 flex-col overflow-hidden border-b border-line bg-surface-2'
       : 'flex min-h-[280px] max-h-[420px] shrink-0 flex-col overflow-hidden border-b border-line bg-surface-2';
-  const sectionHeight = callMode === 'focus' ? '75%' : '50%';
+  const sectionHeight = stageLayout.kind === 'focus' ? '75%' : '50%';
 
   return (
     <section
@@ -1329,7 +1329,7 @@ function FullscreenCall({
                 {others.map((p) => (
                   <div
                     key={p.id}
-                    className="h-full w-[220px] shrink-0 [&>div]:h-full [&>div]:w-full"
+                    className="aspect-video h-full shrink-0 [&>div]:h-full [&>div]:w-full"
                   >
                     <TileRender
                       tile={p}
@@ -1392,9 +1392,13 @@ function FullscreenCall({
           </div>
         ) : (
           <div className="min-h-0 flex-1 p-4">
-            <div className={'grid h-full gap-2 ' + gridClass}>
+            <div
+              className={
+                'grid h-full max-h-full gap-2 place-content-center ' + gridClass
+              }
+            >
               {visibleTiles.map((p) => (
-                <div key={p.id} className="min-h-0 min-w-0 [&>div]:h-full [&>div]:w-full">
+                <div key={p.id} className="aspect-video min-h-0 w-full [&>div]:h-full [&>div]:w-full">
                   <TileRender
                     tile={p}
                     activeSpeakers={activeSpeakers}