🌐 🤖 Sammel: Web-App bricht auf dem Handy um und wirkt kaputt (Pixel 9 Pro) #7

New issue

Open

opened 2026-08-13 10:14:53 +02:00 by holm · 0 comments

holm commented

2026-08-13 10:14:53 +02:00

Owner

Dimension	Bewertung	Einschätzung
Aufwand	`██░░░░░░░░`	Gering — reine CSS-Arbeit, kein JS/DOM-Eingriff
Nutzen	`█████████░`	Sehr hoch — das Handy ist der Haupt-Nutzungsort im Feld
Bruchhäufigkeit	`█████████░`	Sehr hoch — jeder Aufruf unterhalb ~400 px CSS-Breite
Nachhaltigkeit	`████████░░`	Hoch — fluide Metriken statt fester Breakpoints
Dringlichkeit	`████████░░`	Hoch — Holm-Report aus der Praxis

Ausgangslage

Holm-Report 2026-08-13: Die Web-App bricht auf dem Pixel 9 Pro (kleinere Variante) um und wirkt dadurch kaputt.

Headless mit Chromium reproduziert (Fallback-Fonts). Umbruch bei 360, 378 und 400 px CSS-Breite; bei 412 px sauber. Die exakte Schwelle wurde nicht gepinnt (--dump-dom ignoriert --window-size, Screenshot-Bisektion nicht lohnend) — für den Fix irrelevant, weil Grid strukturell nicht umbricht.

Befund: drei unabhängige Ursachen

Der „kaputt"-Eindruck entsteht nicht durch einen Fehler, sondern durch drei zusammenfallende Layout-Schwächen:

#4 — Byte-Strip bricht 5+1 um, die einzelne Kachel dehnt sich per flex: 1 über die volle Zeile. Hauptursache des Eindrucks.
#5 — Typografie überläuft: feste letter-spacing-Werte plus clamp()-Untergrenzen, die bei 360 px längst greifen. Die MAC im Eingabefeld ist angeschnitten.
#6 — Statusbar/Scope/Colophon brechen ohne Zeilenabstand um, der blinkende Cursor springt in eine eigene Zeile.

Fonts

Bisher waren Berkeley Mono und PragmataPro aus Lizenzgründen nicht im Repo — das Handy rendert daher mit System-Monospace, dessen Metriken die Umbrüche verschärfen. Holm 2026-08-13: Web-Lizenzen liegen für beide vor, Fonts sollen eingebaut werden. Wird separat behandelt; die Layout-Fixes müssen unabhängig davon tragen, weil der Fallback bei fehlgeschlagenem Font-Load ohnehin greifen kann.

Definition of Done

Byte-Strip einreihig von 320 px bis Desktop, kein Umbruch
MAC im Eingabefeld bei 320 px vollständig sichtbar
keine horizontale Überlaufkante im Kopfbereich
visuelle Abnahme per Rendering bei 320 / 360 / 412 px, mit und ohne Custom-Fonts

🤖 angelegt von Claude v00 (API/Token holm)

| Dimension | Bewertung | Einschätzung | |---|---|---| | Aufwand | `██░░░░░░░░` | Gering — reine CSS-Arbeit, kein JS/DOM-Eingriff | | Nutzen | `█████████░` | Sehr hoch — das Handy ist der Haupt-Nutzungsort im Feld | | Bruchhäufigkeit | `█████████░` | Sehr hoch — jeder Aufruf unterhalb ~400 px CSS-Breite | | Nachhaltigkeit | `████████░░` | Hoch — fluide Metriken statt fester Breakpoints | | Dringlichkeit | `████████░░` | Hoch — Holm-Report aus der Praxis | ## Ausgangslage Holm-Report 2026-08-13: Die Web-App bricht auf dem Pixel 9 Pro (kleinere Variante) um und **wirkt dadurch kaputt**. Headless mit Chromium reproduziert (Fallback-Fonts). Umbruch bei 360, 378 und 400 px CSS-Breite; bei 412 px sauber. Die exakte Schwelle wurde nicht gepinnt (`--dump-dom` ignoriert `--window-size`, Screenshot-Bisektion nicht lohnend) — für den Fix irrelevant, weil Grid strukturell nicht umbricht. ## Befund: drei unabhängige Ursachen Der „kaputt"-Eindruck entsteht nicht durch einen Fehler, sondern durch drei zusammenfallende Layout-Schwächen: - [#4](https://forgejo.mueller.network/holm.tools.public/oui-decode/issues/4) — **Byte-Strip bricht 5+1 um**, die einzelne Kachel dehnt sich per `flex: 1` über die volle Zeile. Hauptursache des Eindrucks. - [#5](https://forgejo.mueller.network/holm.tools.public/oui-decode/issues/5) — **Typografie überläuft**: feste `letter-spacing`-Werte plus `clamp()`-Untergrenzen, die bei 360 px längst greifen. Die MAC im Eingabefeld ist angeschnitten. - [#6](https://forgejo.mueller.network/holm.tools.public/oui-decode/issues/6) — **Statusbar/Scope/Colophon** brechen ohne Zeilenabstand um, der blinkende Cursor springt in eine eigene Zeile. ## Fonts Bisher waren Berkeley Mono und PragmataPro aus Lizenzgründen nicht im Repo — das Handy rendert daher mit System-Monospace, dessen Metriken die Umbrüche verschärfen. **Holm 2026-08-13: Web-Lizenzen liegen für beide vor, Fonts sollen eingebaut werden.** Wird separat behandelt; die Layout-Fixes müssen unabhängig davon tragen, weil der Fallback bei fehlgeschlagenem Font-Load ohnehin greifen kann. ## Definition of Done - Byte-Strip einreihig von 320 px bis Desktop, kein Umbruch - MAC im Eingabefeld bei 320 px vollständig sichtbar - keine horizontale Überlaufkante im Kopfbereich - visuelle Abnahme per Rendering bei 320 / 360 / 412 px, **mit und ohne** Custom-Fonts > 🤖 angelegt von Claude v00 (API/Token holm)

holm added the

Kind/Bug

Priority/High

labels

2026-08-13 10:14:54 +02:00

holm referenced this issue from a commit

2026-08-13 10:17:19 +02:00

fix(web): Layout bricht auf schmalen Screens nicht mehr um

holm referenced this issue

2026-08-13 18:39:00 +02:00

🌐 🤖 Webfonts über assets.mueller.network einbinden statt ins public Repo committen #8