Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-05-22 11:04:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix media foreground elements being obscured by header/footer

Browse Source
This commit is contained in:
Robin
2026-05-18 13:08:52 +02:00
parent de52ea6590
commit cfbdbca5bb
3 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/room/InCallView.tsx
View File

@@ -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}