From cfbdbca5bbf9d06479c7d538022d5d698a05eb48 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 18 May 2026 13:08:52 +0200
Subject: [PATCH] Fix media foreground elements being obscured by header/footer

---
 src/room/InCallView.tsx           | 17 +++++++++++++++++
 src/tile/MediaView.module.css     |  7 +++++++
 src/tile/SpotlightTile.module.css |  4 +++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 671b6b9a..af9e1fb8 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -90,6 +90,13 @@ import { useLatest } from "../useLatest.ts";
 import { CallFooter } from "../components/CallFooter.tsx";
 import { SettingsIconButton } from "../button/Button.tsx";
 
+declare module "react" {
+  interface CSSProperties {
+    "--call-view-safe-area-inset-top"?: string;
+    "--call-view-safe-area-inset-bottom"?: string;
+  }
+}
+
 const logger = rootLogger.getChild("[InCallView]");
 
 export interface ActiveCallProps extends Omit<
@@ -510,6 +517,16 @@ export const InCallView: FC<InCallViewProps> = ({
           insetBlockStart:
             edgeToEdge || headerBounds.height === 0 ? 0 : headerBounds.bottom,
           height: edgeToEdge ? "100%" : gridBounds.height,
+          // If edge-to-edge, compute new safe area insets that account for the
+          // header and footer.
+          "--call-view-safe-area-inset-top":
+            edgeToEdge && header && showHeader
+              ? `calc(env(safe-area-inset-top) + ${headerBounds.height}px)`
+              : undefined,
+          "--call-view-safe-area-inset-bottom":
+            edgeToEdge && showFooter
+              ? `calc(env(safe-area-inset-bottom) + ${footerBounds.height}px)`
+              : undefined,
         }}
         model={layout}
         Layout={layers.fixed}
diff --git a/src/tile/MediaView.module.css b/src/tile/MediaView.module.css
index 49199253..240f14d1 100644
--- a/src/tile/MediaView.module.css
+++ b/src/tile/MediaView.module.css
@@ -85,6 +85,7 @@ unconditionally select the container so we can use cqmin units */
     calc(var(--media-view-border-radius) - var(--cpd-space-3x))
   );
   padding: var(--fg-inset);
+  transition: padding 0.3s;
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: 1fr auto;
@@ -94,6 +95,12 @@ unconditionally select the container so we can use cqmin units */
   contain: strict;
 }
 
+@media (prefers-reduced-motion) {
+  .fg {
+    transition: none;
+  }
+}
+
 .nameTag {
   grid-area: nameTag;
   place-self: end start;
diff --git a/src/tile/SpotlightTile.module.css b/src/tile/SpotlightTile.module.css
index 037cf10d..54e31106 100644
--- a/src/tile/SpotlightTile.module.css
+++ b/src/tile/SpotlightTile.module.css
@@ -35,7 +35,9 @@ Please see LICENSE in the repository root for full details.
 
 .maximised .item {
   /* Ensure that foreground elements lie within the safe area */
-  --media-view-fg-inset: 10px calc(env(safe-area-inset-right) + 10px) 10px
+  --media-view-fg-inset: calc(var(--call-view-safe-area-inset-top, 0px) + 10px)
+    calc(env(safe-area-inset-right) + 10px)
+    calc(var(--call-view-safe-area-inset-bottom, 0px) + 10px)
     calc(env(safe-area-inset-left) + 10px);
 }