🌐 🤖 Byte-Strip bricht auf schmalen Screens um (5+1) und wirkt kaputt #4

New issue

Closed

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

holm commented

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

Owner

Dimension	Bewertung	Einschätzung
Aufwand	`██░░░░░░░░`	Gering — Flex-Wrap durch 6-Spalten-Grid ersetzen
Nutzen	`█████████░`	Sehr hoch — der Byte-Strip ist das Kernelement der Anzeige
Bruchhäufigkeit	`█████████░`	Sehr hoch — betrifft jedes Handy unterhalb ~400 px CSS-Breite
Nachhaltigkeit	`█████████░`	Sehr hoch — Grid kann strukturell nicht umbrechen
Dringlichkeit	`████████░░`	Hoch — Holm-Report vom Pixel 9 Pro: „wirkt kaputt"

Symptom

Auf dem Pixel 9 Pro (kleinere Variante) bricht die Darstellung um und wirkt dadurch defekt.

Reproduziert headless (Chromium, Fallback-Fonts — Berkeley Mono/PragmataPro liegen derzeit nicht im Repo und fehlen dem Handy — wird separat behoben, siehe Sammel-Issue):

Breite	Byte-Strip
412 px	6 Kacheln in einer Reihe
400 px	5 + 1
378 px	5 + 1
360 px	5 + 1

Die umgebrochene sechste Kachel (F1) zieht sich per flex: 1 1 0 über die gesamte Zeilenbreite — dadurch der „kaputt"-Eindruck: ein einzelnes Byte wird optisch so breit wie fünf.

Ursache

.bytes { display: flex; gap: 6px; flex-wrap: wrap; }
.byte  { flex: 1 1 0; min-width: 46px; }

min-width: 46px verhindert das Schrumpfen, flex-wrap: wrap erlaubt stattdessen den Umbruch, flex: 1 1 0 bläht die umgebrochene Kachel auf.

Fix

.bytes auf display: grid; grid-template-columns: repeat(6, 1fr) umstellen und min-width: 0 setzen. Sechs Spalten sind dann strukturell garantiert; die Kacheln schrumpfen statt umzubrechen. Schriftgrößen in der Kachel per clamp() mitskalieren, damit der Hex-Wert bei 320 px nicht überläuft.

Teil von #7.

🤖 angelegt von Claude v00 (API/Token holm)

| Dimension | Bewertung | Einschätzung | |---|---|---| | Aufwand | `██░░░░░░░░` | Gering — Flex-Wrap durch 6-Spalten-Grid ersetzen | | Nutzen | `█████████░` | Sehr hoch — der Byte-Strip ist das Kernelement der Anzeige | | Bruchhäufigkeit | `█████████░` | Sehr hoch — betrifft jedes Handy unterhalb ~400 px CSS-Breite | | Nachhaltigkeit | `█████████░` | Sehr hoch — Grid kann strukturell nicht umbrechen | | Dringlichkeit | `████████░░` | Hoch — Holm-Report vom Pixel 9 Pro: „wirkt kaputt" | ## Symptom Auf dem Pixel 9 Pro (kleinere Variante) bricht die Darstellung um und wirkt dadurch defekt. Reproduziert headless (Chromium, Fallback-Fonts — Berkeley Mono/PragmataPro liegen derzeit nicht im Repo und fehlen dem Handy — wird separat behoben, siehe Sammel-Issue): | Breite | Byte-Strip | |---|---| | 412 px | 6 Kacheln in einer Reihe | | 400 px | **5 + 1** | | 378 px | **5 + 1** | | 360 px | **5 + 1** | Die umgebrochene sechste Kachel (`F1`) zieht sich per `flex: 1 1 0` über die **gesamte Zeilenbreite** — dadurch der „kaputt"-Eindruck: ein einzelnes Byte wird optisch so breit wie fünf. ## Ursache ```css .bytes { display: flex; gap: 6px; flex-wrap: wrap; } .byte { flex: 1 1 0; min-width: 46px; } ``` `min-width: 46px` verhindert das Schrumpfen, `flex-wrap: wrap` erlaubt stattdessen den Umbruch, `flex: 1 1 0` bläht die umgebrochene Kachel auf. ## Fix `.bytes` auf `display: grid; grid-template-columns: repeat(6, 1fr)` umstellen und `min-width: 0` setzen. Sechs Spalten sind dann strukturell garantiert; die Kacheln schrumpfen statt umzubrechen. Schriftgrößen in der Kachel per `clamp()` mitskalieren, damit der Hex-Wert bei 320 px nicht überläuft. 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:53 +02:00