From 579dfbf789e791fd05b3aca892bf35740de281e8 Mon Sep 17 00:00:00 2001 From: mhoennig Date: Sun, 23 Aug 2026 10:55:49 +0200 Subject: [PATCH] fix: Diagramm-Titelzeile bricht auf Mobil nicht mehr um (D17-Nachtrag 5) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mit dem achten Knopf (Falt-Umschalter, D44) ging die Zeile auf drei Reihen und 86 statt 49 px — und fraß die Fläche, für die es den Ein-Bereich-Modus gibt. Die Knöpfe waren nicht das Problem: Ihre Breiten summieren sich bei 375 px auf 243 px. Die Abstände brachten den Rest — gap:14px mal sieben plus 2×16 px Innenabstand sind mehr als ein Drittel des Bildschirms. Auf Mobil deshalb gap:8px und padding-inline:10px, dazu flex-wrap:nowrap als Riegel: Ohne ihn wäre der Umbruch nur hinausgeschoben und käme beim nächsten Knopf unbemerkt zurück. Die Knöpfe selbst bleiben bei 29 px (Fingergröße). Nachgemessen mit allen acht Bedienelementen — der freshBtn ist der, der die Zeile kippen ließ, weil er nur bei fremden Dokumenten mit Neuigkeiten erscheint: bei 375 px eine Reihe (49 px), bei 320 px eine Reihe mit 10 px Luft. Desktop bleibt bei 14 px unverändert. Co-Authored-By: Claude Fable 5 --- docs/DECISIONS.md | 31 +++++++++++++++++++++++++++++++ frontend/CLAUDE.md | 7 +++++++ frontend/src/style.css | 7 +++++++ 3 files changed, 45 insertions(+) diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index 3a7e357..1f83e00 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -377,6 +377,37 @@ ohnehin unterdrückt; die Gelegenheit genutzt, dem aufgeklappten Kasten `white-space: pre-wrap` zu geben — die mit `\n` gefügten Zeilen liefen bisher zu einem Absatz zusammen.) +**Nachtrag 5 — die Titelzeile bricht nicht mehr um: die Lücken waren zu +breit, nicht die Knöpfe zu viele.** Gemeldet, als der Falt-Umschalter (D44) +den achten Knopf in den Diagramm-Kopf brachte: Die Zeile ging auf drei Reihen +und 86 statt 49 px — und fraß damit genau die Fläche, für die es den +Ein-Bereich-Modus (Nachtrag 1) überhaupt gibt. + +Nachgemessen war die Diagnose eindeutig, und sie lag nicht bei den Knöpfen: +Deren Breiten summieren sich bei 375 px auf 243 px. Die **Abstände** brachten +den Rest — `gap:14px` mal sieben plus 2×16 px Innenabstand sind 130 px, also +mehr als ein Drittel des Bildschirms. Der Nutzer hat das richtig gesehen: +„eigentlich ist dort auch genug Platz für alle Buttons". + +Auf Mobil deshalb `gap:8px` und `padding-inline:10px`, dazu `flex-wrap:nowrap` +als Riegel. Die **Knöpfe selbst bleiben unangetastet** — 29 px sind für einen +Finger ohnehin die Untergrenze; verkleinert wird der Zwischenraum, nicht das +Ziel. Nachgemessen mit allen acht Bedienelementen (der „Was ist neu?"-Knopf +ist der, der die Zeile kippen ließ, weil er nur bei fremden Dokumenten mit +Neuigkeiten erscheint): bei 375 px eine Reihe, 49 px, letztes Element bei +357 von 359; bei 320 px ebenfalls eine Reihe mit 10 px Luft. Dass es auch bei +320 px reicht, liegt am `margin-right:auto` des Bereichs-Umschalters — es +nimmt den Rest auf, wenn welcher da ist, und verschwindet, wenn keiner da ist. + +**Warum `nowrap` und nicht einfach engere Lücken:** Ohne den Riegel wäre der +Umbruch nur weiter hinausgeschoben — der nächste Knopf oder eine längere +Sprache brächte ihn zurück, und zwar wieder unbemerkt. Mit `nowrap` wird aus +einem stillen Layout-Wechsel ein sichtbarer Überlauf; das ist der ehrlichere +Fehler, und die Messung oben zeigt, dass bis 320 px keiner auftritt. Der +Editor-Kopf trägt dieselbe Regel (er hat nur vier Elemente und war nie +gefährdet, aber die Zeile soll in beiden Bereichen gleich hoch bleiben); +Desktop bleibt bei 14 px, dort ist Platz. + ## D18 — Günstigsten Pfad per Inversion zeigen, fehlende Größe = M Der kostengünstigste Weg durch den Baum wird hervorgehoben (Umschalter im Diagramm-Kopf, Default an, Zustand persistiert). Nötig sind bei **all of** alle diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md index 13a24b7..49ca336 100644 --- a/frontend/CLAUDE.md +++ b/frontend/CLAUDE.md @@ -447,6 +447,13 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der **einzige** Touch-Navigation Text → Diagramm (Alt gibt es dort nicht). Keinen langen Druck ins Textfeld legen — der gehört dem OS (Wortauswahl, Auswahlgriffe), anders als im Diagramm, wo D25 ihn sich nehmen konnte. + **Die Titelzeile muss einzeilig bleiben** (`body.mobile .panel-head`: + `gap:8px`, `padding-inline:10px`, `flex-wrap:nowrap` — D17-Nachtrag 5). Beim + Prüfen eines neuen Kopf-Knopfes den **`#freshBtn` einblenden**: Er ist + serienmäßig `hidden` und erscheint nur bei fremden Dokumenten mit Neuem — + genau er brachte die Zeile zum Umbrechen, und ohne ihn sieht die Messung + heil aus. Nicht die Knöpfe verkleinern (29 px sind Fingergröße), sondern die + Lücken; bis 320 px reicht es gemessen. - `--app-height` (`setAppHeight()`, D17-Nachtrag 4): `body{height:var(--app-height)}` kommt aus `visualViewport.height` — nötig gegen überlagernde Browserleisten (Brave). **Die Bildschirmtastatur verkleinert denselben Wert** und quetschte diff --git a/frontend/src/style.css b/frontend/src/style.css index d416296..59e9b6a 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1097,6 +1097,13 @@ Editor-Kopf tut das weiterhin der Dokumenten-Wähler daneben. */ body.mobile .panetoggle{display:inline-flex} body.mobile .panel.right .panetoggle{margin-right:auto} + /* Die Titelzeile muss EINZEILIG bleiben (D17): Bricht sie um, wächst der + Kopf auf das Doppelte und frisst die Fläche, für die es den + Ein-Bereich-Modus überhaupt gibt. Die Knöpfe passen längst — es waren die + Abstände: 14 px Lücke mal sieben plus 2×16 px Innenabstand sind mehr als + ein Drittel von 375 px. Deshalb hier enger und `nowrap` als Riegel; die + Knöpfe selbst bleiben unangetastet (Fingergröße). */ + body.mobile .panel-head{gap:8px;flex-wrap:nowrap;padding-inline:10px} /* 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