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
+15 -5
View File
@@ -504,11 +504,21 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der
Hash-Rückfall, der Marker-Pfad ist nur zu prüfen, wenn man einen echten
`commit/<sha>` in `index.html` einspritzt (danach zurücknehmen!) und
`window.fetch` überschreibt.
- **Diagramm-Kopfzeile auf Mobil (D17-Nachtrag 5, D47):** Die Zeile ist voll —
bei 375 px bleiben mit neun Bedienelementen noch 14 px Luft, bei 320 px passt
es arithmetisch nicht mehr und die Zeile **schiebt** (`overflow-x:auto`).
Wer ein zehntes Element hinzufügt, misst nach (`scrollWidth - clientWidth`
am `.panel-head`) und rechnet damit, dass auf 375 px etwas weichen muss.
- **Titelzeilen tragen die Aufklapp-Menüs — kein `overflow` daran (D50):**
`#docMenu` und `.dlmenu` hängen als absolut positionierte Kinder im
`.panel-head`. Ein `overflow` dort macht ihn zum Scroll-Container und klippt
sie; `overflow-x` hebt dabei das `visible` der **anderen** Achse auf `auto`,
geklippt wird also nach unten — genau dorthin, wo die Menüs aufklappen. Ein
Scroll-Container klippt unabhängig davon, ob er überläuft, der Fehler trifft
also jede Breite. Er ist rein geometrisch **nicht** zu sehen: Kopfhöhe und
Knopfpositionen bleiben korrekt. Prüfen heißt hier: Menü öffnen und mit
`elementFromPoint` nachsehen, ob man es trifft.
- **Diagramm-Kopfzeile auf Mobil (D17-Nachtrag 5, D47, D50):** Die Zeile ist
voll — bei 375 px bleiben mit neun Bedienelementen noch 14 px Luft, bei
320 px passt es arithmetisch nicht mehr und die Zeile **bricht um**
(`@media (max-width:360px)`, zwei Reihen zu 78 px). Wer ein zehntes Element
hinzufügt, misst nach (`scrollWidth - clientWidth` am `.panel-head`) und
rechnet damit, dass auf 375 px etwas weichen muss.
Nicht anfassen: die 29 px Knopfgröße (Fingerziel) und `flex:0 0 auto` an den
Kindern — ohne das schrumpft bei Platzmangel ausgerechnet der Modus-Wähler
(das einzige Element ohne feste Größe) auf einen 2-px-Strich, während sein