fix(web): Rollbalken lief ueber die Player-Leiste

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-09-22 20:21:37 +02:00
1 parent f083fad986
commit d420123a44
2 files changed
+16 -4

No files matched your search

+8 -4
View File
@@ -101,7 +101,11 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
.nav-item svg{flex-shrink:0;width:15px;height:15px}
/* ── MAIN ── */
.main{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--player-h);background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(232,160,32,.04) 0%,transparent 60%)}
/* Der Rollbalken gehoert zum Scrollbereich und laeuft ueber dessen ganze Hoehe. Mit
padding-bottom reichte .main bis an den Fensterboden, also bis UNTER die Player-Leiste —
bei 4 px fiel das nicht auf, bei 12 px schon. Deshalb endet der Scrollbereich jetzt per
margin-bottom ueber der Leiste; die Platzreserve fuer den Inhalt ist damit ohnehin ueberfluessig. */
.main{flex:1;overflow-y:auto;overflow-x:hidden;margin-bottom:var(--player-h);padding-bottom:16px;background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(232,160,32,.04) 0%,transparent 60%)}
.page{display:none;padding:24px 28px}
.page.active{display:block}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px}
@@ -608,9 +612,9 @@ button:focus{outline:none}
.bottom-nav{display:flex;flex-direction:column;justify-content:flex-start}
/* player sits above bottom nav */
.player{bottom:80px}
/* push content above player + bottom nav */
.main{padding-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom) + 64px)}
.page{padding-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom) + 96px)}
/* Scrollbereich endet ueber Player UND unterer Leiste — siehe Kommentar bei .main */
.main{margin-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom));padding-bottom:16px}
.page{padding-bottom:24px}
.queue-panel{bottom:calc(var(--player-h) + 80px)}
.preview-bar{bottom:calc(var(--player-h) + 80px)}
.toast-container{bottom:calc(var(--player-h) + 80px + 16px)}