mirror of
https://github.com/vector-im/element-call.git
synced 2026-10-23 00:02:26 +00:00
Timo K.andClaude Fable 5.1
779ee7a008
The move from media queries to `@container element-call` queries left a few places still asking the viewport: the room header's compact size and the lobby's footer placement went through `useMediaQuery`, the lobby's video preview was `50vh` tall, the reaction picker was capped at `100vw`, and the content insets and the gradient background were sized from `100vw`/`100vh`. Embedded in a corner of a host's page, each of those answered for the page rather than the corner. `useRootSizeMatches` is `useMediaQuery` for the root element, built on the same `observeElementSize$` the layout uses; the lengths become container units. Container units resolve against the nearest query container, and there are others in the tree (the spotlight layouts, the media tiles), so base.css says when they may be used. jsdom gives the body no size at all, which would have every such query read as a tiny window; the test setup now gives it a desktop's, matching what the media query mock already answered. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
119 lines
2.5 KiB
CSS
119 lines
2.5 KiB
CSS
.raisedButton > svg {
|
|
color: var(--cpd-color-icon-on-solid-primary);
|
|
}
|
|
|
|
.reactionPopupMenu {
|
|
--reaction-button-padding: 10px;
|
|
--reaction-button-fontsize: 20px;
|
|
--reaction-button-gap: var(--cpd-separator-spacing);
|
|
display: flex;
|
|
width: fit-content;
|
|
}
|
|
|
|
@container element-call (max-width: 420px) {
|
|
.reactionPopupMenu {
|
|
--reaction-button-padding: 8px;
|
|
--reaction-button-fontsize: 16px;
|
|
--reaction-button-gap: 6px;
|
|
}
|
|
}
|
|
|
|
div.reactionPopupMenuRoot.reactionPopupMenuModal {
|
|
/* Down near the footer it belongs to, rather than centred like other modals.
|
|
A percentage, not a viewport unit: the overlay is positioned `fixed`, so this
|
|
resolves against the page in the standalone app and against the container
|
|
when a host embeds us — where 82vh would put it below the container
|
|
entirely. */
|
|
--overlay-top: 82%;
|
|
width: fit-content;
|
|
}
|
|
|
|
div.reactionPopupMenuRoot {
|
|
/* Center the drawer */
|
|
--inset-inline: 30em;
|
|
}
|
|
|
|
.reactionPopupMenuRoot > div {
|
|
width: fit-content;
|
|
max-width: 100cqw;
|
|
}
|
|
|
|
div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
|
|
padding-inline: var(--cpd-space-6x);
|
|
padding-block: var(--cpd-space-6x);
|
|
}
|
|
|
|
.reactionPopupMenu section {
|
|
height: fit-content;
|
|
flex: 1;
|
|
max-width: fit-content;
|
|
}
|
|
|
|
.reactionPopupMenu section.reactionsMenuSection {
|
|
margin: auto 0;
|
|
flex: auto;
|
|
}
|
|
|
|
.reactionsMenu {
|
|
margin: 0;
|
|
padding: 0;
|
|
flex-grow: 1;
|
|
gap: var(--reaction-button-gap);
|
|
/* Height of 3 rows plus padding. */
|
|
max-height: calc(
|
|
((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3
|
|
);
|
|
max-width: calc(
|
|
((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 5
|
|
);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
list-style: none;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
align-items: auto;
|
|
align-content: start;
|
|
width: fit-content;
|
|
}
|
|
|
|
.reactionsMenu > * {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.reactionButton {
|
|
padding: var(--reaction-button-padding);
|
|
border-radius: var(--cpd-radius-pill-effect);
|
|
font-size: var(--reaction-button-fontsize);
|
|
min-block-size: unset;
|
|
border: none;
|
|
aspect-ratio: 1 / 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.verticalSeperator {
|
|
background-color: var(--cpd-color-gray-800);
|
|
width: 2px;
|
|
height: auto;
|
|
margin-left: var(--cpd-separator-spacing);
|
|
margin-right: var(--cpd-separator-spacing);
|
|
}
|
|
|
|
.alert {
|
|
margin-bottom: var(--cpd-space-3x);
|
|
animation: grow-in 200ms;
|
|
height: 2.5em;
|
|
}
|
|
|
|
@keyframes grow-in {
|
|
from {
|
|
height: 0;
|
|
}
|
|
|
|
to {
|
|
height: 2.5em;
|
|
}
|
|
}
|