diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index 186afc7..fa99e65 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -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. diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md index 40499f9..e1323b5 100644 --- a/frontend/CLAUDE.md +++ b/frontend/CLAUDE.md @@ -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/` 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 diff --git a/frontend/src/style.css b/frontend/src/style.css index 66535f6..3225178 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1128,10 +1128,16 @@ /* Unterhalb von rund 360 px ist es reine Arithmetik: neun Bedienelemente à 29 px plus Lücken brauchen mehr, als dort überhaupt da ist (bei 320 px fehlen 41 px). Kleiner als 29 px darf ein Fingerziel nicht werden - (D17-Nachtrag 5), also schiebt die Zeile. Bei 375 px bleiben 14 px Luft — - dort ändert die Regel nichts, weil nichts überläuft. */ - body.mobile .panel-head{overflow-x:auto;scrollbar-width:none} - body.mobile .panel-head::-webkit-scrollbar{display:none} + (D17-Nachtrag 5) — dort darf die Zeile deshalb umbrechen. + **Kein `overflow` an dieser Stelle** (D50): Die Kopfzeile trägt die beiden + Aufklapp-Menüs (Dokumente, Download) als absolut positionierte Kinder. Ein + Scroll-Container klippt sie — und weil `overflow-x` das `visible` der + anderen Achse auf `auto` hebt, klippt er auch nach unten, wo die Menüs + stehen. Sie waren damit auf **jeder** Mobilbreite unerreichbar, nicht nur + auf den schmalen. */ + @media (max-width:360px){ + body.mobile .panel-head{flex-wrap:wrap} + } /* Inhalte rund 25 % kleiner, damit mehr Plan auf die Fläche passt (D17-Nachtrag 2). Das Diagramm macht das über den CSS-`zoom` (Faktor auf den Nutzer-Zoom, siehe MOBILE_ZOOM in app.js); der Text über die