From baea736616148131c102511723ef13555ba0ca21 Mon Sep 17 00:00:00 2001
From: Claude Fable 5 <fable-5@waidele.info>
Date: Sun, 19 Jul 2026 10:50:19 +0200
Subject: [PATCH] #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 <input> das erste Kind des <li>, also ist das
<p> nie :first-child — die Regel `li > p:first-child { margin-top: 0 }`
griff daher NICHT, das <p> 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 <p>
unabhängig vom vorangehenden <input>. Beide Renderpfade abgedeckt.

Verifiziert per Harness mit exaktem <li><input><p>-DOM (alt vs. neu).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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 `<input>` 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;
 }