Fix media foreground elements being obscured by header/footer

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}

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;

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