fix: Diagramm-Titelzeile bricht auf Mobil nicht mehr um (D17-Nachtrag 5)

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 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-08-23 10:55:49 +02:00
co-authored by Claude Fable 5
parent 417006960f
commit 579dfbf789
3 changed files with 45 additions and 0 deletions
+7
View File
@@ -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
+7
View File
@@ -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