From 9069955895c098208e8f0e416dd5da7b7abbc07d Mon Sep 17 00:00:00 2001 From: mhoennig Date: Sun, 23 Aug 2026 11:52:39 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20Sammelleiste=20im=20vertikalen=20Modus?= =?UTF-8?q?=20r=C3=BCckt=20vom=20Knoten=20ab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Gemeldet: In der vertikalen Ansicht liegt der Abzweig rechts vom Knoten zu dicht am Knoten, das Größen-Badge rendert in die senkrechte Linie hinein und die verschwindet dort. Nachgemessen im Werkbaum-Plan: Das Badge sitzt per `right:-9px` an der Knotenecke und endet 8 px hinter der Knotenkante, die Sammelleiste beginnt bei 9 px — **1 px Luft**. Dazu trägt das Badge einen 1,5 px breiten Rand in Kartenfarbe, der die verbleibende Trennung optisch auffrisst; dieselbe Enge gilt für die Tag-Pillen unten rechts. Behoben wie vorgeschlagen: Der Stub aus dem Elternknoten wird länger, die Leiste rückt von 9 auf 20 px. Umgesetzt über eine Variable `--rail` auf der `ul.and` — Leiste, Abzweig und Zellen-Innenabstand lesen sie gemeinsam, der 21-px-Ast zum Kind bleibt unverändert. Damit trifft die Änderung nur den vertikalen Rechts-Fächer; **kompakt** teilt sich zwar die Basisregeln, behält aber 9 px (dort läuft all-of nach unten, Badge und Leiste begegnen sich nie). Nachgemessen nach der Änderung: 12 px Luft, alle 122 Abzweige treffen weiter die Knotenmitte (0 daneben), alle 69 Stationspunkte des günstigsten Pfads liegen exakt auf ihren Blattknoten (Abweichung 0 px, in vertikal wie horizontal). Kompakt: `--rail` 9 px, Innenabstand 30 px — unverändert. 222 Tests grün. SPEC §9 (Geometrie-Invarianten) hält die Regel fest. Co-Authored-By: Claude Fable 5 --- docs/SPEC.md | 7 +++++++ frontend/src/style.css | 20 +++++++++++++------- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/docs/SPEC.md b/docs/SPEC.md index c9c2495..c1e15dd 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -411,6 +411,13 @@ Siehe D29. 23-px-Abzweig oben bleibt unverändert; die vertikal **zentrierten** all-of-Zwischenknoten bekommen ihn **symmetrisch**, damit ihr Abzweig (50 %-Höhe) weiterhin auf der Knotenmitte liegt. +- Im **vertikalen** Modus tritt die all-of-Verbindung rechts aus dem Knoten aus; + die senkrechte Sammelleiste steht deshalb **weiter vom Knoten ab** als in den + übrigen Anordnungen (20 statt 9 px). Größen-Badge und Tag-Pillen ragen an der + rechten Knotenkante über den Knoten hinaus und lägen sonst unmittelbar an der + Leiste — mit ihrem hellen Rand sähe die Linie dort aus, als risse sie ab. + Betroffen ist nur der Rechts-Fächer: kompakt führt all-of nach unten, dort + treffen Badge und Leiste nie aufeinander. ### Kleiner Bildschirm (mobil) Ab schmaler Breite (≤ 640 px, z. B. Smartphone) ist **immer genau ein Bereich** diff --git a/frontend/src/style.css b/frontend/src/style.css index 59e9b6a..cee4b04 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1000,15 +1000,15 @@ Abzweig auf Knotenmitte (23-px-Offset). */ .tree.vertical, .tree.kompakt{margin:0} .tree.vertical li, .tree.kompakt li{align-items:flex-start} - .tree.vertical ul.and, .tree.kompakt ul.and{flex-direction:column;align-items:flex-start;padding-top:14px} - .tree.vertical ul.and::before, .tree.kompakt ul.and::before{left:9px;height:14px} - .tree.vertical ul.and>li, .tree.kompakt ul.and>li{padding:5px 0 5px 30px} + .tree.vertical ul.and, .tree.kompakt ul.and{--rail:9px;flex-direction:column;align-items:flex-start;padding-top:14px} + .tree.vertical ul.and::before, .tree.kompakt ul.and::before{left:var(--rail);height:14px} + .tree.vertical ul.and>li, .tree.kompakt ul.and>li{padding:5px 0 5px calc(var(--rail) + 21px)} .tree.vertical ul.and>li::before, .tree.kompakt ul.and>li::before{ - left:9px;right:auto;top:23px;width:21px;height:0; + left:var(--rail);right:auto;top:23px;width:21px;height:0; border:0;border-top:2px solid var(--line);border-radius:0; } .tree.vertical ul.and>li::after, .tree.kompakt ul.and>li::after{ - left:9px;right:auto;top:0;width:0;height:100%; + left:var(--rail);right:auto;top:0;width:0;height:100%; border:0;border-left:2px solid var(--line);border-radius:0; } .tree.vertical ul.and>li:last-child::after, .tree.kompakt ul.and>li:last-child::after{height:23px} @@ -1019,10 +1019,16 @@ auf halber Höhe aus, eine vertikale Sammelleiste verteilt auf die Kinder. Kompakt bleibt unberührt (führt all-of nach unten). */ .tree.vertical li.has-and{flex-direction:row;align-items:center} - .tree.vertical li.has-and>ul.and{padding-top:0} + /* Der Stub ist hier länger als die 9 px der gemeinsamen Basis: Das + Größen-Badge (oben rechts) und die Tag-Pillen (unten rechts) ragen 8 px + über die Knotenkante hinaus und standen mit 1 px Luft an der + Sammelleiste — mit ihrem weißen Rand fraßen sie die Linie optisch auf. + 20 px lassen 12 px Luft. Nur vertikal: kompakt führt all-of nach unten, + dort treffen Badge und Leiste nie aufeinander. */ + .tree.vertical li.has-and>ul.and{--rail:20px;padding-top:0} /* Stub von der Parent-Mitte (halbe Höhe) zur vertikalen Sammelleiste */ .tree.vertical li.has-and>ul.and::before{ - left:0;top:50%;width:9px;height:0; + left:0;top:50%;width:var(--rail);height:0; border-left:0;border-top:2px solid var(--line); } /* Abzweig trifft die tatsächliche Knotenmitte des Kindes: