From 7b32135328061c53363c700fe03fd50429898ebd Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 20 May 2026 11:55:27 +0200 Subject: [PATCH] Ensure that foreground elements of media tile do not overlap app bar Because the type of header that we use in Element X (an 'app bar') lives in a different place in the document than the other headers, it needs a special branch to propagate the right insets. --- src/room/InCallView.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 49e7abfc..e20cf508 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -522,12 +522,19 @@ export const InCallView: FC = ({ // 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)` + edgeToEdge && headerStyle !== HeaderStyle.None && showHeader + ? // Header has two relevant cases: if it's an app bar, it lives + // outside the InCallView and consumes the safe area insets + // itself. Otherwise account for the safe area and header size + // as part of the InCallView. + headerStyle === HeaderStyle.AppBar + ? `${bounds.top}px` + : `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)` + ? // Footer always lives inside the InCallView. + `calc(env(safe-area-inset-bottom) + ${footerBounds.height}px)` : undefined, }} model={layout}