From d420123a4444b380a9bd9b2189a2570be0137698 Mon Sep 17 00:00:00 2001 From: marc Date: Tue, 22 Sep 2026 20:21:37 +0200 Subject: [PATCH] fix(web): Rollbalken lief ueber die Player-Leiste Co-Authored-By: Claude Opus 5 --- CHANGELOG.md | 8 ++++++++ styles.css | 12 ++++++++---- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6609156..490cc76 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -122,6 +122,14 @@ Die Android-App zählt eigenständig weiter (mehrere APKs pro Release). Welche d - Die Seite hat dafür einen Zurück-Knopf bekommen (vorher unnötig, weil sie über die Seitenleiste erreichbar war) und zählt für die Seitenleiste jetzt zur Bibliothek statt zu Entdecken. +### Fixed +- **Der Rollbalken lief über die Player-Leiste (Web)** — sofort nach dem Verbreitern gemeldet. Der + Balken gehört zum Scrollbereich und läuft über dessen ganze Höhe, und `.main` reichte per + `padding-bottom` bis an den Fensterboden, also bis **unter** die Leiste. Bei 4 px fiel das nie + auf, bei 12 px sofort. Der Scrollbereich endet jetzt per `margin-bottom` über der Leiste — auf + dem Handy über Leiste **und** unterer Navigation. Die Platzreserve für den Inhalt, die das + `padding-bottom` war, ist damit überflüssig geworden und entfällt. + --- ## [3.0] — 2026-09-19 diff --git a/styles.css b/styles.css index ed7613a..f477dcc 100644 --- a/styles.css +++ b/styles.css @@ -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)}