Move ringing status indicator to header on mobile

On mobile, the ringing status indicator is supposed to display in the header rather than on a tile. The exact layout differs between Android and iOS. To get it right I had to refactor AppBar to use CSS grid templates.

(Also, I changed my mind about the exact ringing data I needed out of CallViewModel - sorry. A little move of the ringtone audio renderer into its own component was necessary to accommodate that.)
This commit is contained in:
Robin
2026-06-18 16:45:28 +02:00
parent 9b070052a0
commit e11c04ac87
18 changed files with 415 additions and 310 deletions

View File

@@ -121,18 +121,22 @@ unconditionally select the container so we can use cqmin units */
.status {
grid-area: status;
color: var(--cpd-color-text-primary);
display: flex;
flex-wrap: none;
align-items: center;
gap: 3px;
user-select: none;
overflow: hidden;
margin-block-start: calc(var(--cpd-space-3x) - var(--fg-inset));
margin-inline-start: calc(var(--cpd-space-4x) - var(--fg-inset));
}
.status svg {
color: var(--cpd-color-icon-tertiary);
span {
vertical-align: center;
}
svg {
color: var(--cpd-color-icon-tertiary);
vertical-align: center;
margin-inline-end: 3px;
block-size: 1.2em;
inline-size: 1.2em;
}
}
.reactions {