Sidebar-Icon-Leiste bei langen Seitenlisten verdeckt — muss immer sichtbar sein #129

New Issue

fable-5 · 2026-07-15T14:15:01+02:00

fable-5 commented

2026-07-15 14:15:01 +02:00

Bug (Stefans Feedback zum v0.7.0-Prod-Test, Follow-up zu #124)

Die vier Sidebar-Icons (Graph, Neue Seite, Importieren, Papierkorb) sind bei vielen Seiten zunächst verdeckt: .sidebar ist selbst der Scroll-Container (overflow-y: auto, base.css), und das margin-top: auto der .sidebar__footer pinnt die Leiste nur ans Ende des Inhalts — bei einer langen Seitenliste liegt sie unterhalb des sichtbaren Bereichs und erscheint erst nach dem Scrollen.

Soll: Die Icon-Leiste ist IMMER sichtbar, egal wie viele Seiten die Liste hat.

Lösungsoptionen:

Sticky-Footer (empfohlen, reines CSS): .sidebar__footer { position: sticky; bottom: calc(-1 * var(--space-4)); background: var(--color-bg-subtle); } + Padding/Abdeckung so, dass die scrollende Liste sauber unter der Leiste verschwindet (das Sidebar-Padding unten mitbedenken; ggf. border-top als Trenner).
Struktur-Umbau: innerer Scroll-Bereich (Inhalt flex: 1; overflow-y: auto; min-height: 0) und die Footer-Leiste außerhalb des Scrollers — sauberer, braucht aber ein Wrapper-Element in SidebarContent (e2e-Klassen beachten).

Das schwebende Import-Fortschritts-Panel (positioniert über der Leiste, #124) muss mit der gewählten Lösung weiter funktionieren (z-index/Positionierungs-Kontext prüfen).

**Bug** (Stefans Feedback zum v0.7.0-Prod-Test, Follow-up zu #124) Die vier Sidebar-Icons (Graph, Neue Seite, Importieren, Papierkorb) sind bei vielen Seiten zunächst **verdeckt**: `.sidebar` ist selbst der Scroll-Container (`overflow-y: auto`, base.css), und das `margin-top: auto` der `.sidebar__footer` pinnt die Leiste nur ans Ende des **Inhalts** — bei einer langen Seitenliste liegt sie unterhalb des sichtbaren Bereichs und erscheint erst nach dem Scrollen. **Soll:** Die Icon-Leiste ist IMMER sichtbar, egal wie viele Seiten die Liste hat. **Lösungsoptionen:** 1. **Sticky-Footer (empfohlen, reines CSS):** `.sidebar__footer { position: sticky; bottom: calc(-1 * var(--space-4)); background: var(--color-bg-subtle); }` + Padding/Abdeckung so, dass die scrollende Liste sauber unter der Leiste verschwindet (das Sidebar-Padding unten mitbedenken; ggf. border-top als Trenner). 2. Struktur-Umbau: innerer Scroll-Bereich (Inhalt `flex: 1; overflow-y: auto; min-height: 0`) und die Footer-Leiste außerhalb des Scrollers — sauberer, braucht aber ein Wrapper-Element in `SidebarContent` (e2e-Klassen beachten). Das schwebende Import-Fortschritts-Panel (positioniert über der Leiste, #124) muss mit der gewählten Lösung weiter funktionieren (z-index/Positionierungs-Kontext prüfen).

fable-5 added this to the M16 — Papierkorb: Mehrfachauswahl milestone 2026-07-15 14:15:01 +02:00

fable-5 added the

frontend

label 2026-07-15 14:15:01 +02:00

fable-5 referenced this issue from a commit

2026-07-16 12:04:10 +02:00

Sidebar: pin the action icon row to the visible bottom (#129)

fable-5 commented

2026-07-16 12:29:17 +02:00

Umgesetzt in 31557f0 (Option 1, reines CSS): .sidebar__footer ist jetzt position: sticky; bottom: calc(-1 * var(--space-4)) mit negativen Seiten-/Unterrändern (heben das Sidebar-Padding auf), eigenem Hintergrund (--color-bg-subtle) und border-top als Trenner — die Seitenliste scrollt sauber unter der Leiste weg, die vier Icons bleiben bei jeder Listenlänge sichtbar. margin-top: auto bleibt erhalten (kurze Listen: Leiste weiterhin unten bündig). Das Import-Float-Panel (absolut im Footer positioniert, #124) funktioniert unverändert. Visuell verifiziert mit 40 Seiten (Footer bündig am Sidebar-Rand, Messung footerBottom == sidebarBottom); CI grün auf 4f79a81.

Umgesetzt in `31557f0` (Option 1, reines CSS): `.sidebar__footer` ist jetzt `position: sticky; bottom: calc(-1 * var(--space-4))` mit negativen Seiten-/Unterrändern (heben das Sidebar-Padding auf), eigenem Hintergrund (`--color-bg-subtle`) und `border-top` als Trenner — die Seitenliste scrollt sauber unter der Leiste weg, die vier Icons bleiben bei jeder Listenlänge sichtbar. `margin-top: auto` bleibt erhalten (kurze Listen: Leiste weiterhin unten bündig). Das Import-Float-Panel (absolut im Footer positioniert, #124) funktioniert unverändert. Visuell verifiziert mit 40 Seiten (Footer bündig am Sidebar-Rand, Messung footerBottom == sidebarBottom); CI grün auf `4f79a81`.

fable-5 closed this issue

2026-07-16 12:31:13 +02:00

Sign in to join this conversation.