Responsive: Header & Spendenseite auf Mobile/Tablet kaputt #7

New issue

Closed

opened 2026-08-19 08:11:16 +02:00 by Simon · 0 comments

Simon commented

2026-08-19 08:11:16 +02:00

Owner

Problem

Die Startseite (Header) und die Spendenseite sehen auf Smartphones und Tablets komisch/gequetscht aus.

Konkrete Fehler (verifiziert via Playwright, 393/768/1024 px):

Spendenseite, iPad-Landscape (1024 px): horizontaler Overflow ~219 px.
Die Bankdetails-Zeilen (.donation-details div mit fester 10-rem-Label-Spalte + IBAN + Copy-Button) passen in der Zweispalter-Ansicht (.donation-bank-layout, ab 860 px) nicht in die Spalte. Copy-Buttons ragen bis x≈1110 px heraus → Scrollbar quer.
Spendenseite, alle mobilen Breiten: "Doppelkarte"-Optik.
Die äußere weiße Karte (.donation-card) enthält die Methoden-Karten (.donation-method), die selbst Rahmen + Schatten haben. Auf 393 px bleibt nur ein 4–8 px dünner Reststreifen – wirkt wie Layout-Fehler, nicht wie Design.
Startseite, iPad-Portrait (768 px): CTA-Buttons stapeln vertikal.
.site-nav bricht bei ≤820 px auf flex-direction: column. Bei 768 px wäre horizontal Platz → Header unnötig hoch, rechte Seite asymmetrisch.
Startseite, iPhone (393 px): Header gequetscht.
Titel (2 Zeilen) + gestapelte Buttons mit engem gap: 0.35rem und schmalem padding. Zu wenig Luft, Buttons fast zusammengepresst.

Erwartet

Kein horizontaler Overflow auf 393, 768 und 1024 px (beide Seiten).
Spendenseite: Bankdetails passen in die Spalte, IBAN bricht sauber um, Copy-Buttons bleiben erreichbar.
Doppelkarte auf Mobile zu einer Karte (Methoden-Boxen ohne eigenen Rahmen/Schatten auf <860 px).
Header: Buttons ab ~700 px horizontal nebeneinander, iPhone mit großzügigeren Abständen.

Evidenz

Screenshots in den Anhängen (Playwright, Chromium headless).

Betroffene Dateien: styles.css (Breakpoints ~1800–2050, Header ~120–140), index.html, spenden.html

## Problem Die Startseite (Header) und die Spendenseite sehen auf Smartphones und Tablets komisch/gequetscht aus. ### Konkrete Fehler (verifiziert via Playwright, 393/768/1024 px): 1. **Spendenseite, iPad-Landscape (1024 px): horizontaler Overflow ~219 px.** Die Bankdetails-Zeilen (`.donation-details div` mit fester 10-rem-Label-Spalte + IBAN + Copy-Button) passen in der Zweispalter-Ansicht (`.donation-bank-layout`, ab 860 px) nicht in die Spalte. Copy-Buttons ragen bis x≈1110 px heraus → Scrollbar quer. 2. **Spendenseite, alle mobilen Breiten: "Doppelkarte"-Optik.** Die äußere weiße Karte (`.donation-card`) enthält die Methoden-Karten (`.donation-method`), die selbst Rahmen + Schatten haben. Auf 393 px bleibt nur ein 4–8 px dünner Reststreifen – wirkt wie Layout-Fehler, nicht wie Design. 3. **Startseite, iPad-Portrait (768 px): CTA-Buttons stapeln vertikal.** `.site-nav` bricht bei ≤820 px auf `flex-direction: column`. Bei 768 px wäre horizontal Platz → Header unnötig hoch, rechte Seite asymmetrisch. 4. **Startseite, iPhone (393 px): Header gequetscht.** Titel (2 Zeilen) + gestapelte Buttons mit engem `gap: 0.35rem` und schmalem `padding`. Zu wenig Luft, Buttons fast zusammengepresst. ### Erwartet - Kein horizontaler Overflow auf 393, 768 und 1024 px (beide Seiten). - Spendenseite: Bankdetails passen in die Spalte, IBAN bricht sauber um, Copy-Buttons bleiben erreichbar. - Doppelkarte auf Mobile zu einer Karte (Methoden-Boxen ohne eigenen Rahmen/Schatten auf <860 px). - Header: Buttons ab ~700 px horizontal nebeneinander, iPhone mit großzügigeren Abständen. ### Evidenz Screenshots in den Anhängen (Playwright, Chromium headless). **Betroffene Dateien:** `styles.css` (Breakpoints ~1800–2050, Header ~120–140), `index.html`, `spenden.html`

Simon referenced this issue from a commit

2026-08-19 10:05:03 +02:00

fix(responsive): Header & Spendenseite auf Tablet/Phone, Footer ohne Stand

Simon referenced this issue from a pull request that will close it,

2026-08-19 10:06:03 +02:00

Responsive: Header & Spendenseite auf Mobile/Tablet, Footer ohne Stand #8

Simon closed this issue

2026-08-19 10:06:21 +02:00

~~Simon referenced this issue 2026-09-16 06:50:47 +02:00~~

Security Audit (extern) — Live-Website buergerinitiative-ejun.de (16.09.2026) #18