josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep the watch party panel above the bottom bars so its leave button is reachable

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-22 14:23:39 +08:00
parent 6c4571cb33
commit c9e021a045
2 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app.js
View File

@@ -5584,7 +5584,6 @@ const SectionRail = (() => {
// guessing an offset that is wrong on the next phone. // guessing an offset that is wrong on the next phone.
function placeRail() { function placeRail() {
const r = rail(); const r = rail();
if (!r || r.classList.contains('hidden')) return;
let occupied = 0; let occupied = 0;
for (const id of ['bottomNav', 'miniBar']) { for (const id of ['bottomNav', 'miniBar']) {
const el = document.getElementById(id); const el = document.getElementById(id);
@@ -5597,7 +5596,10 @@ const SectionRail = (() => {
const want = Math.round(occupied + 14); const want = Math.round(occupied + 14);
if (st.bottom !== want) { if (st.bottom !== want) {
st.bottom = want; st.bottom = want;
r.style.setProperty('--rail-bottom', want + 'px'); if (r) r.style.setProperty('--rail-bottom', want + 'px');
// Published for anything else that must sit above the bottom bars —
// the watch-party panel's leave button was hidden behind them.
document.documentElement.style.setProperty('--bottom-chrome', Math.round(occupied) + 'px');
} }
} }

19
frontend/styles.css
View File

@@ -4070,8 +4070,21 @@ body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or t
.pt-send { display: flex; gap: 6px; } .pt-send { display: flex; gap: 6px; }
.pt-leave { background: transparent; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; text-decoration: underline; align-self: center; } .pt-leave { background: transparent; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; text-decoration: underline; align-self: center; }
@media (max-width: 720px) { @media (max-width: 720px) {
.party-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; height: 62vh; } /* `bottom: 8px` put the panel's last child — "End the party" — underneath
.party-panel.min { height: auto; } the bottom nav and the mini player. --bottom-chrome is measured at runtime
(SectionRail.placeRail) because either bar can be absent. max-height keeps
the panel inside the viewport instead of growing off the top. */
.party-panel {
left: 8px; right: 8px; width: auto; top: auto;
bottom: calc(var(--bottom-chrome, 88px) + 8px);
height: auto;
max-height: min(62vh, calc(100vh - var(--bottom-chrome, 88px) - 96px));
}
.party-panel.min { height: auto; max-height: none; }
/* Whatever the content, the panel scrolls rather than hiding its own tail. */
.pt-body { overflow-y: auto; }
/* The chat box used to take every spare pixel and push the buttons out. */
.pt-chat { flex: 0 1 auto; max-height: 30vh; }
} }
/* Uploads: cover art + badges on cards */ /* Uploads: cover art + badges on cards */
.thumb img.no-art { opacity: 0; } .thumb img.no-art { opacity: 0; }
@@ -4235,7 +4248,7 @@ body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or t
them and overrides --rail-bottom; this is only the pre-measure default. */ them and overrides --rail-bottom; this is only the pre-measure default. */
.sec-rail { .sec-rail {
top: auto; top: auto;
bottom: var(--rail-bottom, 150px); bottom: var(--rail-bottom, calc(var(--bottom-chrome, 88px) + 14px));
transform: none; transform: none;
} }
} }