mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-10 21:55:19 +00:00
Valere
3361ce2b60
Opening settings in an embedded call put the dialog in the middle of the host's window, spilling outside the container, and with two calls on a page the second drew over the first's dialog. The container established a stacking context but not a containing block, which are two different things and only the first had been done. `position: fixed` resolves against the viewport unless an ancestor makes itself the containing block, so the modal scrim and dialog in Overlay.module.css — `fixed`, `inset: 0`, centred, because in the standalone app they are meant to cover the page — were positioned and sized against the window. Layout and paint containment makes the container the containing block for those descendants and clips what we paint to our own box. The second-call-on-top symptom goes with it, since the dialog now stays inside the first call's box and there is nothing to overlap. Two sibling components still cannot draw over one another by construction, neither being able to leave its own stacking context, but that only shows if a host overlaps them. Containment clips a box measured in viewport units but cannot resize it, so anything positioned that way is simply put somewhere outside the container and disappears. That applied to the reactions overlay, a `100vw` by `100vh` box, and to the reaction picker, which sits at `82vh` so as to appear near the footer it belongs to. Both are positioned against whatever Element Call treats as its root — `[data-overlay-container]` in the app, which is the size of the page, and the host's container when embedded — so percentages mean the same thing there and the right thing here. The earpiece overlay is `inset: 0` with no viewport units, so containment is enough for it. Three viewport-relative sizes remain, all of which need more than a change of unit: the lobby's video preview is `50vh` on a flex item with an aspect ratio, `--content-inset-*` ramps up to a desktop inset from the window width, and the picker's `max-width` cap is the window's. The clipping cuts both ways: a menu near the edge of a small container is trimmed rather than overflowing into the host. That is the trade an embedded component makes.
44 lines
1.7 KiB
CSS
44 lines
1.7 KiB
CSS
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
/* The container a host mounts us into. It fills whatever space the host gives
|
|
it, and nothing we draw may leave it.
|
|
|
|
That takes two separate things, which are easy to mistake for one. `isolation`
|
|
gives us a stacking context, so nothing inside can be layered above the host's
|
|
own interface. Containment makes us the containing block for `position: fixed`
|
|
descendants, and clips what we paint to our own box: without it, the modal
|
|
scrim and dialog — which are positioned `fixed` and centred, since in the app
|
|
they are meant to cover the page — resolve against the viewport and appear in
|
|
the middle of the host's window rather than in the middle of the call.
|
|
|
|
The clipping cuts both ways: a menu near the edge of a small container is
|
|
trimmed rather than overflowing into the host. That is the trade being an
|
|
embedded component makes. */
|
|
.root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
isolation: isolate;
|
|
contain: layout paint;
|
|
position: relative;
|
|
background-color: var(--cpd-color-bg-canvas-default);
|
|
color: var(--cpd-color-text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* Compound's overlay container, which holds tooltips and popovers, has to fill
|
|
the container for the elements inside it to be positioned against it. The
|
|
standalone page does the same for the container under `#root`. */
|
|
.root > [data-overlay-container] {
|
|
position: relative;
|
|
block-size: 100%;
|
|
}
|