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

#137 Fix: Checkbox-Absatz per :first-of-type ausrichten (nicht :first-child)
All checks were successful
CI / Lint, typecheck, test (pull_request) Successful in 4m28s
Details
CI / Build container images (pull_request) Successful in 1m7s
Details
CI / Import/export fidelity gate (pull_request) Successful in 55s
Details
CI / Auth e2e pack (pull_request) Successful in 6m44s
Details

Browse Source 
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
This commit is contained in:
Claude Fable 5 2026-07-19 10:50:19 +02:00
parent 5255cdce06
commit baea736616
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 /* 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 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 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 > input[type='checkbox'],
ul[data-type='task_list'] li > label { ul[data-type='task_list'] li > label {
flex: none; flex: none;
margin-top: 0.25em; margin-top: 0.25em;
} }
ul[data-type='task_list'] li > p:first-child, ul[data-type='task_list'] li > p:first-of-type,
ul[data-type='task_list'] li > div > p:first-child { ul[data-type='task_list'] li > div > p:first-of-type {
margin-top: 0; margin-top: 0;
} }
ul[data-type='task_list'] li > p:last-child, ul[data-type='task_list'] li > p:last-of-type,
ul[data-type='task_list'] li > div > p:last-child { ul[data-type='task_list'] li > div > p:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }