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

#137 Fix: Checkbox-Ausrichtung (:first-of-type statt :first-child) #139

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

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

@ -72,6 +72,12 @@ button {
padding: 0 var(--space-4); padding: 0 var(--space-4);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
background: var(--color-bg); background: var(--color-bg);
/* Own stacking context above the scrolling `.main` content: the nav comes
before `.app-body` in the DOM, so without this the sticky editor toolbar
(z-index 20 inside `.main`) paints over the nav's overflow "…" menu, hiding
its entries. 30 > the toolbar's 20; modals (1100+) still win. */
position: relative;
z-index: 30;
} }
.topbar__brand { .topbar__brand {
@ -1076,10 +1082,13 @@ button {
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
background: var(--color-bg-subtle); background: var(--color-bg-subtle);
/* Long articles: the toolbar pins to the top of the scrolling content /* Long articles: the toolbar pins to the top of the scrolling content area
area instead of scrolling away. */ instead of scrolling away. The scroll container `.main` has a top padding
(`--space-6`); a plain `top: 0` would stick the toolbar at that padding
edge, leaving a visible gap below the nav. Offset by `-1 * --space-6` so it
pins flush against the navigation, with no scrolling page showing through. */
position: sticky; position: sticky;
top: 0; top: calc(-1 * var(--space-6));
z-index: 20; z-index: 20;
} }
@ -1616,20 +1625,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;
} }