Nur Desktop: festes 4-Spalten-Grid, keine @media-Query, kein touch-action #8

New issue

Open

opened 2026-10-18 23:23:35 +02:00 by gilli · 0 comments

gilli commented

2026-10-18 23:23:35 +02:00

Owner

Problem

Das Layout ist nur für Desktop brauchbar.

styles.css:67 setzt ein festes 4-Spalten-Grid:

.build-grid { grid-template-columns: 250px minmax(320px, 1fr) 220px 330px; }

Das sind ~1150 px fester Anteil plus Lücken. Das Stylesheet enthält keine @media-Query. Unterhalb von ~1200 px kollabieren die Panels, auf dem Handy ist der Builder nicht bedienbar.

Zusätzlich: kein touch-action im Stylesheet. Der Drag-Free-Look (src/main.js:135-153) und das Drehen der Builder-Vorschau konkurrieren damit mit der Geste des Browsers.

Vorschlag

Ein Breakpoint, der Palette und Analyse unter die Vorschau stapelt, plus touch-action: none auf dem Canvas für die Flugphase.

Prüfung

Bei 390 px und 820 px Breite in Chrome prüfen: alle Panels erreichbar, Launch-Button klickbar, Drag dreht die Kamera, ohne die Seite zu scrollen.

## Problem Das Layout ist nur für Desktop brauchbar. `styles.css:67` setzt ein festes 4-Spalten-Grid: ```css .build-grid { grid-template-columns: 250px minmax(320px, 1fr) 220px 330px; } ``` Das sind ~1150 px fester Anteil plus Lücken. Das Stylesheet enthält **keine** `@media`-Query. Unterhalb von ~1200 px kollabieren die Panels, auf dem Handy ist der Builder nicht bedienbar. Zusätzlich: kein `touch-action` im Stylesheet. Der Drag-Free-Look (`src/main.js:135-153`) und das Drehen der Builder-Vorschau konkurrieren damit mit der Geste des Browsers. ## Vorschlag Ein Breakpoint, der Palette und Analyse unter die Vorschau stapelt, plus `touch-action: none` auf dem Canvas für die Flugphase. ## Prüfung Bei 390 px und 820 px Breite in Chrome prüfen: alle Panels erreichbar, Launch-Button klickbar, Drag dreht die Kamera, ohne die Seite zu scrollen.

gilli added the

a11y

label

2026-10-18 23:23:35 +02:00