From 8324ce2ce097d1ea2c52ac024ff6ba2daf75c2a3 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 20 May 2026 15:59:13 +0200
Subject: [PATCH 1/2] Avoid overlapping spotlight tiles with the app bar

The default inset that is given to the fixed layout layer needs to account for the app bar now.
---
 src/room/InCallView.tsx                         | 6 +++---
 src/room/__snapshots__/InCallView.test.tsx.snap | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index a1301474..1bdbf16b 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -516,11 +516,11 @@ export const InCallView: FC<InCallViewProps> = ({
         key="fixed"
         className={styles.fixedGrid}
         style={{
-          insetBlockStart:
-            edgeToEdge || headerBounds.height === 0 ? 0 : headerBounds.bottom,
+          // If not edge-to-edge, consume the header insets right here.
+          insetBlockStart: edgeToEdge ? 0 : bounds.top + headerBounds.height,
           height: edgeToEdge ? "100%" : gridBounds.height,
           // If edge-to-edge, compute new safe area insets that account for the
-          // header and footer.
+          // header and footer, passing them down to the tiles.
           "--call-view-safe-area-inset-top":
             edgeToEdge && headerStyle !== HeaderStyle.None && showHeader
               ? // Header has two relevant cases: if it's an app bar, it lives
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index d9f768e7..39f8d8b2 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -104,6 +104,7 @@ exports[`InCallView > rendering > renders 1`] = `
     </div>
     <div
       class="fixedGrid grid"
+      style="inset-block-start: NaNpx;"
     >
       <div />
     </div>

From 8d07d552d79a53bf852dc196d0de060664f64935 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 20 May 2026 16:03:48 +0200
Subject: [PATCH 2/2] Ensure landscape layout is always edge-to-edge on mobile

The spotlight landscape layout was edge-to-edge previously, and should remain that way.
---
 src/state/CallViewModel/CallViewModel.ts | 10 ++++++----
 src/state/layout-types.ts                |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 3a3e57d7..9532b497 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -1070,10 +1070,12 @@ export function createCallViewModel$(
     }),
   );
 
-  const spotlightLandscapeLayoutMedia$: Observable<SpotlightLandscapeLayoutMedia> =
+  const spotlightLandscapeLayoutMedia$ = (
+    edgeToEdge: boolean,
+  ): Observable<SpotlightLandscapeLayoutMedia> =>
     combineLatest([grid$, spotlight$], (grid, spotlight) => ({
       type: "spotlight-landscape",
-      edgeToEdge: false,
+      edgeToEdge,
       spotlight,
       grid,
     }));
@@ -1208,7 +1210,7 @@ export function createCallViewModel$(
                       switchMap((expanded) =>
                         expanded
                           ? spotlightExpandedLayoutMedia$(false)
-                          : spotlightLandscapeLayoutMedia$,
+                          : spotlightLandscapeLayoutMedia$(false),
                       ),
                     );
                 }
@@ -1234,7 +1236,7 @@ export function createCallViewModel$(
                   case "grid":
                     // Yes, grid mode actually gets you a "spotlight" layout in
                     // this window mode.
-                    return spotlightLandscapeLayoutMedia$;
+                    return spotlightLandscapeLayoutMedia$(true);
                   case "spotlight":
                     return spotlightExpandedLayoutMedia$(true);
                 }
diff --git a/src/state/layout-types.ts b/src/state/layout-types.ts
index 83a80e9a..2b0d459d 100644
--- a/src/state/layout-types.ts
+++ b/src/state/layout-types.ts
@@ -26,7 +26,7 @@ export interface GridLayoutMedia {
 
 export interface SpotlightLandscapeLayoutMedia {
   type: "spotlight-landscape";
-  edgeToEdge: false;
+  edgeToEdge: boolean;
   spotlight: MediaViewModel[];
   grid: UserMediaViewModel[];
 }