🌐 🤖 Statusbar/Scope/Colophon brechen unaufgeräumt um (Zeilenabstand, Cursor springt) #6

New issue

Closed

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

holm commented

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

Owner

Dimension	Bewertung	Einschätzung
Aufwand	`█░░░░░░░░░`	Minimal — row-gap und flex-wrap ergänzen
Nutzen	`█████░░░░░`	Mittel — Randbereiche, aber sie tragen den „kaputt"-Eindruck mit
Bruchhäufigkeit	`███████░░░`	Hoch — auch bei 412 px bereits sichtbar (Colophon)
Nachhaltigkeit	`███████░░░`	Hoch — einmal fluide, dauerhaft ruhig
Dringlichkeit	`███░░░░░░░`	Niedrig — rein kosmetisch

Symptom

.statusbar bricht bei 360 px in zwei Zeilen (DB: 39.516 OUI-EINTRÄGE / QUELLE: IEEE MA-L), ohne Zeilenabstand — die Zeilen kleben aneinander. Der blinkende Cursor (margin-left: auto) springt dabei in die zweite Zeile.
.colophon bricht bereits bei 412 px zweizeilig um, ebenfalls ohne row-gap.
.scope hat display: flex ohne flex-wrap — bei sehr schmalen Screens laufen die beiden Legenden-Segmente über die Kante statt umzubrechen.

Fix

gap zweiwertig führen (gap: 4px 18px), damit umgebrochene Zeilen Luft bekommen
.scope auf flex-wrap: wrap
Cursor-Element (margin-left: auto) so führen, dass es beim Umbruch nicht allein in einer Zeile landet

Teil von #7.

🤖 angelegt von Claude v00 (API/Token holm)

| Dimension | Bewertung | Einschätzung | |---|---|---| | Aufwand | `█░░░░░░░░░` | Minimal — row-gap und flex-wrap ergänzen | | Nutzen | `█████░░░░░` | Mittel — Randbereiche, aber sie tragen den „kaputt"-Eindruck mit | | Bruchhäufigkeit | `███████░░░` | Hoch — auch bei 412 px bereits sichtbar (Colophon) | | Nachhaltigkeit | `███████░░░` | Hoch — einmal fluide, dauerhaft ruhig | | Dringlichkeit | `███░░░░░░░` | Niedrig — rein kosmetisch | ## Symptom - `.statusbar` bricht bei 360 px in zwei Zeilen (`DB: 39.516 OUI-EINTRÄGE` / `QUELLE: IEEE MA-L`), ohne Zeilenabstand — die Zeilen kleben aneinander. Der blinkende Cursor (`margin-left: auto`) springt dabei in die zweite Zeile. - `.colophon` bricht bereits bei 412 px zweizeilig um, ebenfalls ohne row-gap. - `.scope` hat `display: flex` **ohne** `flex-wrap` — bei sehr schmalen Screens laufen die beiden Legenden-Segmente über die Kante statt umzubrechen. ## Fix - `gap` zweiwertig führen (`gap: 4px 18px`), damit umgebrochene Zeilen Luft bekommen - `.scope` auf `flex-wrap: wrap` - Cursor-Element (`margin-left: auto`) so führen, dass es beim Umbruch nicht allein in einer Zeile landet Teil von [#7](https://forgejo.mueller.network/holm.tools.public/oui-decode/issues/7). > 🤖 angelegt von Claude v00 (API/Token holm)

holm referenced this issue

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

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

holm

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