Responsive Design: Mobile-Darstellung der Webapp #6

New Issue

tobias · 2026-04-07T13:29:22+02:00

tobias commented

2026-04-07 13:29:22 +02:00

Problem

Auf dem Handy ist die Darstellung der App teilweise unbrauchbar.

Beobachtete Symptome

Anträge bleiben bei der Navigation unten "hängen" — beim Scrollen/Wechseln rutscht der Inhalt nicht korrekt mit
Sehr kleiner Browse-Bereich verfügbar — fixierte Inhalte (Header, Navigation, Footer?) blockieren den Großteil des Viewports, sodass nur noch ein winziges Fenster zum eigentlichen Lesen/Browsen übrig bleibt
Allgemein wirkt das Layout auf schmalen Viewports "komisch"

Vermutete Ursachen (zu verifizieren)

position: fixed / sticky Elemente ohne Mobile-Breakpoint
Fehlende oder zu großzügige min-height / max-height auf Container
Kein passender viewport-Meta-Tag oder fehlende Media Queries
Tabellen / breite Inhalte ohne horizontales Scrolling oder Umbruch

TODO

Reproduktion auf echtem Mobilgerät dokumentieren (Screenshots / Viewport-Größe)
Templates in webapp/app/templates/ auf Responsive-Tauglichkeit prüfen
Fixed/Sticky-Elemente identifizieren und Mobile-Verhalten anpassen
Scroll-Verhalten der Antragsliste auf Mobile testen
Cross-Device-Test (iOS Safari, Android Chrome, verschiedene Viewport-Breiten)

Priorität

Mittel — Desktop funktioniert, Mobile-UX ist aber für mobile Nutzer*innen ein Blocker.

## Problem Auf dem Handy ist die Darstellung der App teilweise unbrauchbar. ## Beobachtete Symptome - **Anträge bleiben bei der Navigation unten "hängen"** — beim Scrollen/Wechseln rutscht der Inhalt nicht korrekt mit - **Sehr kleiner Browse-Bereich verfügbar** — fixierte Inhalte (Header, Navigation, Footer?) blockieren den Großteil des Viewports, sodass nur noch ein winziges Fenster zum eigentlichen Lesen/Browsen übrig bleibt - Allgemein wirkt das Layout auf schmalen Viewports "komisch" ## Vermutete Ursachen (zu verifizieren) - `position: fixed` / `sticky` Elemente ohne Mobile-Breakpoint - Fehlende oder zu großzügige `min-height` / `max-height` auf Container - Kein passender `viewport`-Meta-Tag oder fehlende Media Queries - Tabellen / breite Inhalte ohne horizontales Scrolling oder Umbruch ## TODO - [ ] Reproduktion auf echtem Mobilgerät dokumentieren (Screenshots / Viewport-Größe) - [ ] Templates in `webapp/app/templates/` auf Responsive-Tauglichkeit prüfen - [ ] Fixed/Sticky-Elemente identifizieren und Mobile-Verhalten anpassen - [ ] Scroll-Verhalten der Antragsliste auf Mobile testen - [ ] Cross-Device-Test (iOS Safari, Android Chrome, verschiedene Viewport-Breiten) ## Priorität Mittel — Desktop funktioniert, Mobile-UX ist aber für mobile Nutzer*innen ein Blocker.

tobias commented

2026-04-07 13:33:14 +02:00

Fix-Ansatz (lokal in `webapp/app/templates/index.html`)

Identifizierte Ursachen

.main-container { height: calc(100vh - 70px) } ging von 70px Header aus. Auf Mobile wrappt der Header (h1 + Subtitle + Bundesland-Select + Mode-Toggle) in mehrere Zeilen → Header wird 150–220px hoch → Container überläuft den Viewport unten.
Mobile-Breakpoint kappte .list-panel auf max-height: 50vh, ohne dem Detail-Panel ein vernünftiges Verhalten zu geben. Beim Tap auf einen Antrag updatete der Inhalt unsichtbar weit unten — wirkte wie „hängengeblieben".
Kein 100dvh → iOS Safari Address-Bar machte das Layout zusätzlich kaputt.
Verschachtelte Scrollcontainer auf Touch (detail-panel { overflow-y: auto }) sind fummelig.

Änderungen

Body als Flex-Column mit min-height: 100vh (+ 100dvh-Fallback für iOS). Header behält natürliche Höhe, Main-Container füllt mit flex: 1 den Rest — keine hartcodierte Header-Höhe mehr.
.main-container: height: calc(100vh - 70px) → flex: 1; min-height: 0.
Mobile-Breakpoint (@media max-width: 900px) komplett überarbeitet:
- Header kompakter (kleinere Padding/Schrift, Subtitle als zweite Zeile)
- .list-panel ohne max-height, dafür .list-content { max-height: 50vh } → die Liste scrollt intern, der Rest der Seite scrollt natürlich
- .detail-panel { overflow: visible; flex: none } → kein nested scroll, das ganze Dokument scrollt
- Mode-Toggle wraps sauber
Neuer Breakpoint @media max-width: 600px für Smartphones: Subtitle ausgeblendet, Matrix-Tabelle kompakter, matrix-grid einspaltig, score-big kleiner, etc.
„← Zur Liste"-Button im Detail-Card (nur auf Mobile sichtbar via .btn-back-mobile), scrollt zurück zur Liste.
Auto-Scroll zum Detail-Panel in showDetail() via matchMedia('(max-width: 900px)') — Antrag wird beim Tap automatisch sichtbar.

Noch offen

Reproduktion auf echtem Gerät (iOS Safari, Android Chrome) verifizieren
Tags-Mode und Upload-Mode auf Mobile testen (sollten von den Body-Flex- und Header-Änderungen mitprofitieren, aber nicht explizit getestet)
quellen.html nicht angefasst — ist Fluss-Layout, sollte ok sein
Deploy auf vserver

## Fix-Ansatz (lokal in `webapp/app/templates/index.html`) ### Identifizierte Ursachen 1. **`.main-container { height: calc(100vh - 70px) }`** ging von 70px Header aus. Auf Mobile wrappt der Header (h1 + Subtitle + Bundesland-Select + Mode-Toggle) in mehrere Zeilen → Header wird 150–220px hoch → Container überläuft den Viewport unten. 2. **Mobile-Breakpoint** kappte `.list-panel` auf `max-height: 50vh`, ohne dem Detail-Panel ein vernünftiges Verhalten zu geben. Beim Tap auf einen Antrag updatete der Inhalt **unsichtbar weit unten** — wirkte wie „hängengeblieben". 3. **Kein `100dvh`** → iOS Safari Address-Bar machte das Layout zusätzlich kaputt. 4. **Verschachtelte Scrollcontainer** auf Touch (`detail-panel { overflow-y: auto }`) sind fummelig. ### Änderungen - **Body als Flex-Column** mit `min-height: 100vh` (+ `100dvh`-Fallback für iOS). Header behält natürliche Höhe, Main-Container füllt mit `flex: 1` den Rest — keine hartcodierte Header-Höhe mehr. - **`.main-container`**: `height: calc(100vh - 70px)` → `flex: 1; min-height: 0`. - **Mobile-Breakpoint (`@media max-width: 900px`)** komplett überarbeitet: - Header kompakter (kleinere Padding/Schrift, Subtitle als zweite Zeile) - `.list-panel` ohne `max-height`, dafür **`.list-content { max-height: 50vh }`** → die Liste scrollt intern, der Rest der Seite scrollt natürlich - `.detail-panel { overflow: visible; flex: none }` → kein nested scroll, das ganze Dokument scrollt - Mode-Toggle wraps sauber - **Neuer Breakpoint `@media max-width: 600px`** für Smartphones: Subtitle ausgeblendet, Matrix-Tabelle kompakter, `matrix-grid` einspaltig, `score-big` kleiner, etc. - **„← Zur Liste"-Button** im Detail-Card (nur auf Mobile sichtbar via `.btn-back-mobile`), scrollt zurück zur Liste. - **Auto-Scroll zum Detail-Panel** in `showDetail()` via `matchMedia('(max-width: 900px)')` — Antrag wird beim Tap automatisch sichtbar. ### Noch offen - [ ] Reproduktion auf echtem Gerät (iOS Safari, Android Chrome) verifizieren - [ ] Tags-Mode und Upload-Mode auf Mobile testen (sollten von den Body-Flex- und Header-Änderungen mitprofitieren, aber nicht explizit getestet) - [ ] `quellen.html` nicht angefasst — ist Fluss-Layout, sollte ok sein - [ ] Deploy auf vserver

tobias referenced this issue from a commit

2026-04-07 13:48:56 +02:00

Fix responsive layout for mobile viewports (#6)

tobias closed this issue

2026-04-07 13:51:20 +02:00

tobias referenced this issue

2026-04-09 10:16:34 +02:00

Regelmäßige Security Audits — initiale Befunde + wiederkehrender Prozess #57

tobias referenced this issue from a commit

2026-04-09 10:45:44 +02:00

Security hotfixes #1, #2, #6 from audit (#57)

tobias referenced this issue