Fix media foreground elements being obscured by header/footer

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

View File

@@ -85,6 +85,7 @@ unconditionally select the container so we can use cqmin units */
calc(var(--media-view-border-radius) - var(--cpd-space-3x))
);
padding: var(--fg-inset);
transition: padding 0.3s;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 1fr auto;
@@ -94,6 +95,12 @@ unconditionally select the container so we can use cqmin units */
contain: strict;
}
@media (prefers-reduced-motion) {
.fg {
transition: none;
}
}
.nameTag {
grid-area: nameTag;
place-self: end start;

View File

@@ -35,7 +35,9 @@ Please see LICENSE in the repository root for full details.
.maximised .item {
/* Ensure that foreground elements lie within the safe area */
--media-view-fg-inset: 10px calc(env(safe-area-inset-right) + 10px) 10px
--media-view-fg-inset: calc(var(--call-view-safe-area-inset-top, 0px) + 10px)
calc(env(safe-area-inset-right) + 10px)
calc(var(--call-view-safe-area-inset-bottom, 0px) + 10px)
calc(env(safe-area-inset-left) + 10px);
}