From baea736616148131c102511723ef13555ba0ca21 Mon Sep 17 00:00:00 2001 From: Claude Fable 5 Date: Sun, 19 Jul 2026 10:50:19 +0200 Subject: [PATCH 1/2] #137 Fix: Checkbox-Absatz per :first-of-type ausrichten (nicht :first-child) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Im Lesemodus-Markup ist das das erste Kind des
  • , also ist das

    nie :first-child — die Regel `li > p:first-child { margin-top: 0 }` griff daher NICHT, das

    behielt seine ~1em-Obermarge und der Text saß deutlich tiefer als die Checkbox (auf Test/Int sichtbar, kein Cache-Bug). Fix: :first-of-type/:last-of-type treffen den ersten/letzten

    unabhängig vom vorangehenden . Beide Renderpfade abgedeckt. Verifiziert per Harness mit exaktem

  • -DOM (alt vs. neu). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC --- apps/web/src/styles/base.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css index 43a6602..a491c3d 100644 --- a/apps/web/src/styles/base.css +++ b/apps/web/src/styles/base.css @@ -1616,20 +1616,23 @@ ul[data-type='task_list'] li { /* The checkbox is the top flex child; nudge it onto the first text line and drop the leading/trailing margins of the item's paragraph so the text meets the checkbox instead of dropping a line. Covers both DOM shapes: read-mode - `li > input` + `li > p`, and editor `li > label > input` + `li > div > p`. */ + `li > input` + `li > p`, and editor `li > label > input` + `li > div > p`. + Uses `:first-of-type`/`:last-of-type` (NOT `:first-child`): in the read-mode + markup the `` is the first child, so the paragraph is never + `:first-child` and a `:first-child` reset would silently miss (issue #137). */ ul[data-type='task_list'] li > input[type='checkbox'], ul[data-type='task_list'] li > label { flex: none; margin-top: 0.25em; } -ul[data-type='task_list'] li > p:first-child, -ul[data-type='task_list'] li > div > p:first-child { +ul[data-type='task_list'] li > p:first-of-type, +ul[data-type='task_list'] li > div > p:first-of-type { margin-top: 0; } -ul[data-type='task_list'] li > p:last-child, -ul[data-type='task_list'] li > div > p:last-child { +ul[data-type='task_list'] li > p:last-of-type, +ul[data-type='task_list'] li > div > p:last-of-type { margin-bottom: 0; } -- 2.45.2 From 1b0fd212548511b36379c0ddb9a9b6fc00e7b1c6 Mon Sep 17 00:00:00 2001 From: Claude Fable 5 Date: Sun, 19 Jul 2026 11:08:40 +0200 Subject: [PATCH 2/2] =?UTF-8?q?Editor-Toolbar:=20b=C3=BCndig=20an=20Nav=20?= =?UTF-8?q?fixen=20+=20Overflow-Men=C3=BC=20=C3=BCber=20die=20Toolbar=20he?= =?UTF-8?q?ben?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Zwei im Bearbeiten-Modus gemeldete Layout-Bugs: 1. Die sticky Editor-Toolbar klebte an der Padding-Kante des Scroll- Containers `.main` (padding-top: --space-6), also mit sichtbarer Lücke unter der Navigation, durch die die scrollende Seite schien. Fix: `top: calc(-1 * var(--space-6))` → die Toolbar pinnt bündig an die Nav. 2. Das „…"-Overflow-Menü der Navigation lag HINTER der Toolbar: `.topbar` steht im DOM vor `.app-body`, hatte aber keinen Stacking-Kontext, also malte die z-index-20-Toolbar in `.main` darüber und verdeckte Menüeinträge. Fix: `.topbar { position: relative; z-index: 30 }` (> 20; Modals mit 1100+ gewinnen weiterhin). Beide am echten Test-Editor mit langer, scrollbarer Seite verifiziert (gap_px=0 nach dem Scrollen; Menü vollständig über der Toolbar). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC --- apps/web/src/styles/base.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css index a491c3d..908cd9e 100644 --- a/apps/web/src/styles/base.css +++ b/apps/web/src/styles/base.css @@ -72,6 +72,12 @@ button { padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-bg); + /* Own stacking context above the scrolling `.main` content: the nav comes + before `.app-body` in the DOM, so without this the sticky editor toolbar + (z-index 20 inside `.main`) paints over the nav's overflow "…" menu, hiding + its entries. 30 > the toolbar's 20; modals (1100+) still win. */ + position: relative; + z-index: 30; } .topbar__brand { @@ -1076,10 +1082,13 @@ button { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-bg-subtle); - /* Long articles: the toolbar pins to the top of the scrolling content - area instead of scrolling away. */ + /* Long articles: the toolbar pins to the top of the scrolling content area + instead of scrolling away. The scroll container `.main` has a top padding + (`--space-6`); a plain `top: 0` would stick the toolbar at that padding + edge, leaving a visible gap below the nav. Offset by `-1 * --space-6` so it + pins flush against the navigation, with no scrolling page showing through. */ position: sticky; - top: 0; + top: calc(-1 * var(--space-6)); z-index: 20; } -- 2.45.2