mirror of
https://github.com/element-hq/element-call.git
synced 2026-10-01 00:17:57 +00:00
Timo K.andClaude Fable 5.1
e296d88969
Compound's Tooltip floats its bubble through floating-ui's FloatingPortal, into the body: outside the element the component build confines its stylesheet to, so a label tooltip shows as bare text at all times. An enclosing FloatingPortal rooted at the container makes the nested portals land inside it instead. The call goes in an isolating wrapper there, standing in for the standalone page's #root, so that its footer layer no longer paints above the modals. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
67 lines
2.5 KiB
CSS
67 lines
2.5 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 a
|
|
component rather than a page 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;
|
|
}
|
|
|
|
/* floating-ui's portal node, which `PortalRoot` puts here to hold the call
|
|
along with the tooltips Compound floats over it. It fills the container, and
|
|
lays out its children as the container would. */
|
|
.root > [data-floating-ui-portal] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
block-size: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
/* The call itself, in the wrapper `PortalRoot` gives it. It is a stacking
|
|
context of its own, as the standalone page's `#root` is, so that the layers
|
|
the call view uses for its header, footer and overlays stay below the modals
|
|
and toasts, which are portalled into the root and carry no layer of their own,
|
|
and below the tooltips. */
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
block-size: 100%;
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* The tooltips sit in portal nodes of their own, nested in ours. Raised, so
|
|
that a tooltip opened inside a modal shows above it: the modal is portalled
|
|
straight into the root and so comes later in the document than our node. */
|
|
.root > [data-floating-ui-portal] > [data-floating-ui-portal] {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|