fix: Dokumenten- und Download-Menü klappen auf Mobil wieder auf (D50)

Gemeldet: „Dokumente aufklappen/auswählen funktioniert in Mobilansicht nicht."
Regression aus D47, einen Tag alt.

Ursache: Das dort eingeführte `overflow-x:auto` macht aus der Titelzeile einen
Scroll-Container — und beide Aufklapp-Menüs hängen als absolut positionierte
Kinder genau darin (`#docMenu` im Editor-Kopf, `.dlmenu` im Diagramm-Kopf).
Übersehen war dabei eine CSS-Regel: `overflow-x` auf etwas anderes als
`visible` hebt ein `visible` der ANDEREN Achse auf `auto`. Geklippt wurde also
nicht seitlich, sondern nach unten — dorthin, wo die Menüs aufklappen. Und ein
Scroll-Container klippt, ob er überläuft oder nicht: Der Fehler traf jede
Mobilbreite, nicht nur die schmalen, für die die Regel gedacht war.

Nachgestellt bei 375 px: Das Dokumenten-Menü ist 153 px hoch und beginnt
156 px unterhalb der Kopfunterkante (clientHeight 43, scrollHeight 200);
`elementFromPoint` an seiner Stelle liefert das Textfeld. Beim Download-Menü
dasselbe. Das Menü war also nicht schwer zu treffen, sondern gar nicht da.

Behoben durch Wegnahme: kein `overflow` mehr an der Zeile. An seine Stelle
tritt Umbrechen, aber nur unter 360 px, wo neun Fingerziele arithmetisch nicht
nebeneinander passen; darüber bleibt `nowrap`. Erwogen und verworfen war,
die Menüs per `position:fixed` aus dem Container zu heben — JS-Geometrie für
etwas, das CSS allein konnte, und der Preis stand in keinem Verhältnis: Das
`overflow` diente nur Breiten unter 360 px, kaputt waren die Menüs überall.
`flex:0 0 auto` gegen den zerdrückten Modus-Wähler bleibt.

Nachgemessen — und zwar die Bedienung, nicht die Geometrie, denn genau darin
war der Fehler unsichtbar (die Zeile war weiter 49 px hoch, alle Knöpfe an
ihrem Platz): Bei 375 px und 320 px trifft `elementFromPoint` im geöffneten
Menü `.docitem` bzw. `.dlmenu`, und ein Klick wechselt das Dokument wirklich
(Werkbaum -> Example: Titel, `werkbaum-active`, neu gebauter Baum). Kopfzeile
375 px eine Reihe zu 49 px, 320 px zwei Reihen zu 78 px mit allen neun
Elementen vollständig sichtbar. Desktop unverändert. 236 Tests grün.

D47 bekommt den Verweis, dass sein `overflow` zurückgenommen ist; gelöscht
wird dort nichts. frontend/CLAUDE.md warnt jetzt vor `overflow` an Leisten,
die Menüs tragen — samt dem Hinweis, dass man das nicht an Maßen sieht.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-08-23 14:40:30 +02:00
co-authored by Claude Fable 5
parent 1b8bf06973
commit ec338eb558
3 changed files with 88 additions and 9 deletions
+63
View File
@@ -3076,6 +3076,12 @@ wieder 40 px breit). Das ist die ehrliche Fortschreibung der D17-Regel: Der
Riegel sollte einen unbemerkten Layout-Wechsel verhindern, nicht ein
Bedienelement opfern.
*(Das `overflow-x:auto` war ein Fehler und ist zurückgenommen — es machte aus
der Kopfzeile einen Scroll-Container und klippte damit die beiden
Aufklapp-Menüs, die als absolut positionierte Kinder darin hängen. Was an
seine Stelle tritt und warum es niemandem auffiel: **D50**. `flex:0 0 auto`
gegen den zerdrückten Modus-Wähler bleibt.)*
## D48 — Der Werkbaum-Plan erklärt sich selbst: ID und Beschreibung an jedem Knoten
Der mitgelieferte Plan (D27) ist zugleich Vorzeigedokument und Projektübersicht
— und war für Fremde weitgehend stumm. Ein Knoten wie „Stay greedy, but say so"
@@ -3184,3 +3190,60 @@ rund 53 Zeichen und muss schieben. Wer dort viel liest, zieht den Splitter auf
oder wechselt in die Textansicht. Ein Umschalter dafür wurde nicht gebaut — aus
demselben Grund wie in D33: ein Bedienelement plus neun Übersetzungen für einen
Zustand, den kaum jemand umstellen will.
## D50 — Kein `overflow` an der Titelzeile: sie trägt die Aufklapp-Menüs
Gemeldet: „Dokumente aufklappen/auswählen funktioniert in Mobilansicht nicht."
Eine Regression aus D47, einen Tag alt.
**Ursache.** D47 gab der Titelzeile auf Mobil `overflow-x:auto`, damit bei
320 px alle neun Bedienelemente erreichbar bleiben. Damit wird sie zum
**Scroll-Container** — und beide Aufklapp-Menüs hängen als absolut
positionierte Kinder genau darin: `#docMenu` (Dokumente) im Editor-Kopf,
`.dlmenu` (Download) im Diagramm-Kopf. Beide standen anschließend im
abgeschnittenen Bereich.
**Der Teil, der beim Bauen übersehen wurde, ist eine CSS-Regel:** `overflow-x`
auf etwas anderes als `visible` zu setzen hebt ein `visible` der **anderen
Achse** auf `auto`. Gemessen: `overflow-x:auto``overflow-y:auto`. Geklippt
wurde also nicht seitlich, wo man es beabsichtigt hatte, sondern **nach
unten** — dorthin, wo die Menüs aufklappen. Deshalb war der Fehler auch nicht
auf schmale Geräte beschränkt: Ein Scroll-Container klippt, ob er überläuft
oder nicht, also auf **jeder** Mobilbreite.
Nachgestellt bei 375 px: Das Dokumenten-Menü ist 153 px hoch und beginnt 156 px
unterhalb der Kopfunterkante (`clientHeight` 43, `scrollHeight` 200);
`elementFromPoint` an seiner Stelle liefert das Textfeld. Das Download-Menü
ebenso — dort kam der Diagramm-Hintergrund zurück. Aufklappen ging also nicht
bloß „nicht gut", das Menü war gar nicht da.
**Behoben durch Wegnahme, nicht durch einen Umweg.** Erwogen war, die Menüs per
`position:fixed` aus dem Container zu heben und beim Öffnen aus dem
Trigger-Rechteck zu positionieren — das hätte beides gerettet, aber JS-Geometrie
für etwas eingeführt, das CSS bisher allein konnte, samt Nachführen bei jeder
Größenänderung. Der Preis stand in keinem Verhältnis zum Gewinn: Das `overflow`
diente **ausschließlich** Breiten unter rund 360 px, kaputt waren die Menüs
**überall**.
**An seine Stelle tritt Umbrechen — aber nur dort, wo es rechnerisch nicht
passt.** Unter 360 px (`@media (max-width:360px)`) darf die Zeile umbrechen;
darüber bleibt `nowrap` als Riegel. Das nimmt D17-Nachtrag 5 nicht zurück: Der
Riegel sollte einen **unbemerkten** Layout-Wechsel verhindern, und ein Umbruch
bei einer Breite, bei der neun Fingerziele arithmetisch nicht nebeneinander
passen, ist keine Überraschung, sondern die einzige ehrliche Möglichkeit.
Nachgemessen: 375 px eine Reihe zu 49 px, alles innerhalb; 320 px zwei Reihen zu
78 px, alle neun Elemente vollständig sichtbar, Modus-Wähler weiterhin 40 px
breit (`flex:0 0 auto` aus D47 bleibt und ist unabhängig richtig).
**Geprüft ist jetzt die Bedienung, nicht die Geometrie.** Der D47-Nachweis
bestand aus Breiten und Höhen — und genau darin war der Fehler unsichtbar, weil
die Kopfzeile ja weiterhin 49 px hoch war und alle Knöpfe an ihrem Platz saßen.
Gemessen wird deshalb jetzt, ob das Menü nach dem Öffnen an seiner eigenen
Stelle auch **getroffen** wird (`elementFromPoint` landet auf `.docitem` bzw.
`.dlmenu`) und ob ein Klick darauf das Dokument wirklich wechselt (Werkbaum →
Example: Titel, `werkbaum-active` und der neu gebaute Baum). Beides bei 375 px
und bei 320 px.
**Lehre, im selben Geist wie D25 und D17-Nachtrag 4:** Wer einer Leiste
`overflow` gibt, entscheidet damit über alles, was aus ihr herausragen soll —
Menüs, Tooltips, Overlays. In `frontend/CLAUDE.md` steht das jetzt bei der
Kopfzeilen-Stolperfalle.