From d1d98a95753918e8ce83463be08fe0c6f582f947 Mon Sep 17 00:00:00 2001
From: Claude Fable 5 <fable-5@waidele.info>
Date: Sun, 19 Jul 2026 00:55:18 +0200
Subject: [PATCH] =?UTF-8?q?#137=20Checkbox-Aufz=C3=A4hlungen:=20Textzeile?=
 =?UTF-8?q?=20vertikal=20ausrichten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Task-List-CSS war auf `.editor-content` gescoped und griff daher in
keinem Lese-Container (public/comment/legal/home/history-preview), wo
docToHtml sein `<li><input><p>`-Markup einspeist — dort blieb der Bullet
sichtbar, die Checkbox lag inline und das Block-`<p>` mit Default-
`margin: 1em 0` versetzte den Text in die nächste Zeile.

Fix: Task-List-Regeln über das eindeutige `data-type='task_list'`-Attribut
(nur von docToHtml und der Editor-NodeView erzeugt) entscopen, sodass sie
im Editor UND in allen Lese-Containern greifen; Checkbox per kleinem
margin-top auf die erste Textzeile ausrichten und Ober-/Untermarge des
Item-Absatzes neutralisieren. Deckt beide DOM-Formen ab: Lesemodus
`li > input` + `li > p`, Editor `li > label > input` + `li > div > p`.

Visuell verifiziert (Vorher/Nachher, beide Pfade).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC
---
 apps/web/src/styles/base.css | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css
index 4f42ef9..c10aac2 100644
--- a/apps/web/src/styles/base.css
+++ b/apps/web/src/styles/base.css
@@ -1581,17 +1581,44 @@ button {
   padding: 0;
 }
 
-.editor-content ul[data-type='task_list'] {
+/* Task lists (checkbox lists). Styled globally via the unique
+   `data-type='task_list'` attribute — produced only by docToHtml and the
+   editor nodeview — so checkbox and text line up in the editor
+   (.editor-content) AND every read-mode container that injects docToHtml
+   output (.public-page__body, .comment__body, .legal-page__body, .home-page,
+   .history-panel__preview). Previously these rules were scoped to
+   .editor-content and never reached the read views. Issue #137. */
+ul[data-type='task_list'] {
   list-style: none;
   padding-left: var(--space-2);
 }
 
-.editor-content ul[data-type='task_list'] li {
+ul[data-type='task_list'] li {
   display: flex;
   align-items: flex-start;
   gap: var(--space-2);
 }
 
+/* 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`. */
+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 {
+  margin-top: 0;
+}
+
+ul[data-type='task_list'] li > p:last-child,
+ul[data-type='task_list'] li > div > p:last-child {
+  margin-bottom: 0;
+}
+
 .editor-content table {
   border-collapse: collapse;
   margin: var(--space-4) 0;