Merge pull request #3983 from element-hq/one-on-one-portrait-regressions

Fix a couple more regressions due to the one-on-one portrait layout

src/room/InCallView.tsx

@@ -516,11 +516,11 @@ export const InCallView: FC<InCallViewProps> = ({
         key="fixed"
         className={styles.fixedGrid}
         style={{
-          insetBlockStart:
+          // If not edge-to-edge, consume the header insets right here.
-            edgeToEdge || headerBounds.height === 0 ? 0 : headerBounds.bottom,
+          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

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>

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);
                 }

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[];
 }