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

#137 Nachfix 2: Task-Item-Absätze per Nachfahren-Selektor (NodeView nested das <p> zwei Wrapper tief) #141

Merged
fable-5 merged 1 commits from fix-137-nodeview into main 2026-07-19 20:39:14 +02:00
Conversation 0 Commits 1 Files Changed 1 +11 -10
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1623,25 +1623,26 @@ 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`.
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). */
drop the leading/trailing margins of the item's paragraphs so the text meets
the checkbox instead of dropping a line. DESCENDANT selectors on purpose
(issue #137, second regression): the DOM depth differs per surface —
public/docToHtml renders `li > input` + `li > p`, but the editor/auth read
view (TipTap ReactNodeView) nests the paragraph TWO wrappers deep:
`li > div[data-node-view-content] > div > p`. Child-combinator chains keep
missing one of the shapes; matching any `p` inside the task item is the
robust form. `:first-of-type`/`:last-of-type` (NOT `:first-child`) because
the `<input>`/`<label>` precedes the paragraph in the read-mode markup. */
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-of-type,
ul[data-type='task_list'] li > div > p:first-of-type {
ul[data-type='task_list'] li p:first-of-type {
margin-top: 0;
}
ul[data-type='task_list'] li > p:last-of-type,
ul[data-type='task_list'] li > div > p:last-of-type {
ul[data-type='task_list'] li p:last-of-type {
margin-bottom: 0;
}