ui: jeder Bedienpunkt 32 px, Menü-Gruppe rollt statt zu drängeln (#862)

[larszu]

Gemessen im echten Browser (2026-09-13, Chromium gegen dist/renderer, 390/768/1440 px) mit scripts/bedienbar.mjs aus av-planner-suite (B-77).

Der Anlass

Der Wächter misst seit B-77 vier Planer. Dieser stand nicht in der Liste, weil sein dist/ das Electron-Layout trägt (renderer/index.html statt einer Wurzel-Datei) — eine Eigenschaft des Laufs, keine Auskunft über die App. Als der Ordner dist/renderer einmal bedient wurde, kamen 62 Bedienpunkte unter 32 px heraus (33 bei 390 px).

Bedienpunkt	vorher
Menüknöpfe (File · Edit · Tools · View · Help)	26 px
Projektname in der Kopfzeile	22 px
Undo / Redo	30 × 22 px
Einstellungen	22 px
Spalten-Griffe (‹ ›)	28 × 28 px
Reiter der Seitenleiste	26 px
Suchfeld der Bibliothek	28 px
die 16 Kategoriezeilen der Bibliothek	18 px
Kategorie-Chips (Video · Audio · Control · …)	24 px
Schematic / Circuit	24 px
die vier ReactFlow-Regler	26 × 27 px
das Stil-Feld am Kabel	49 × 17 px

Achtzehn Pixel ist eine Zeile, die man mit der Maus trifft und mit dem Finger nicht — und die Bibliothek ist die Fläche, auf der in dieser App am meisten geklickt wird.

Warum kein Wächter das gesagt hat

mobil:check misst Überlauf und war auf allen 62 Punkten grün. Das ist kein Versäumnis: er beantwortet eine andere Frage, und er beantwortet sie gut — nichts ragt in keiner Breite und keiner Sprache hinaus. greifzonen:check misst, welcher Pfad auf dem Canvas obenauf liegt. Drei Läufe, drei Fragen.

Was ausgenommen bleibt

Alles auf dem Canvas (.react-flow__node, .react-flow__handle). Eine Buchse am Gerät ist kein Knopf in einer Leiste: ihre Größe kommt aus dem Raster des Geräts (B-48, gridSize), und sie auf 32 px zu heben verschöbe jeden Port und damit jedes Kabel. Der Canvas hat seine eigene Bedienung — Zoom — und seine eigene Messung. Dazu wie überall: Kästchen, Auswahlknöpfe, Schieberegler.

Was die Regel mit sich brachte

1. Die Kopfzeile passte auf Deutsch nicht mehr. Breitere kleine Knöpfe, und die Zeile hatte keinen Spielraum: mobil:check wurde rot (Projektname bis 410 px, rechte Gruppe bis 438 px) — auf Englisch nicht. Genau dafür misst er jede ausgelieferte Sprache.

Die Abhilfe aus B-66 (Polsterung verkleinern) ist ausgereizt. Die fünf Menüs stehen jetzt in einer eigenen Gruppe (.cp-menubar), und die rollt waagerecht. Nicht die ganze Zeile: rollte sie, rollte der Einstellungen-Knopf mit aus dem Bild — die Lage, die B-66 beschreibt.

Dass sie rollen darf, ist keine Selbstverständlichkeit. Ein Rollbereich schneidet ab, was nicht hineinpasst, und die Klappen waren Kinder dieser Zeile. Sie hängen jetzt am Fenster. Im light-planner ist genau diese Kombination schiefgegangen (larszu/light-planner#126: Datei-Klappe 250 × 505 px groß, 0 px sichtbar). Rollen führt die Klappe nach statt sie zu schließen — im multicam-planner ging sie sonst auf und sofort wieder zu, weil das Rollereignis nach dem Klick kommt.

2. Die Menütitel brachen um. Mit 32 px Höhe hatte ihr Inhalt Platz für eine zweite Zeile, und weil sie in einer schrumpfenden Reihe stehen, nahmen sie sie sich: aus 46 × 26 px wurden 36 × 37 px, das Zeichen stand unter dem Wort. inline-flex items-center bricht nicht um — dieselbe Bauart wie in den anderen vier Apps.

Gegenprobe

390px   rumpf 390 / fenster 390 · 50 Bedienpunkte
768px   rumpf 768 / fenster 768 · 52 Bedienpunkte
1440px  rumpf 1440 / fenster 1440 · 93 Bedienpunkte

Kein Bedienpunkt unter 32 px, nichts ragt hinaus, kein Feld ohne Namen. 4130 Tests grün, alle fünf Wächter grün (lang, form, mobil, actions, greifzonen — letzterer unter xvfb-run, wie in CI).

Nebenbefund, nicht in diesem PR

Beim ersten Start stehen zwei Willkommens-Dialoge übereinander: der eigene und der aus @avplan/onboarding-core. Auf 390 px überlappen sie sichtbar. Das ist eine Frage der Dialog-Reihenfolge, keine der Zielgrößen, und gehört in einen eigenen Eintrag.

Closes #862

🤖 Generated with Claude Code

https://claude.ai/code/session_016DYtHJAFkg4LUw7afKLMmT

---

Generated by Claude Code