stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

#137 Checkbox-Aufzählungen: Textzeile vertikal ausrichten

Browse Source 
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
This commit is contained in:
Claude Fable 5 2026-07-19 00:55:18 +02:00
parent e1dbf0e6cd
commit d1d98a9575
1 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
apps/web/src/styles/base.css
View File

@ -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;