Sit a task checkbox on its own line, at any type size

The box was aligned with `margin-top: 2px` on the label. That number can only be
right at one size: the line it has to meet is 1em * --doc-line, and both halves
move — --doc-line is 1.15 in Docs style and 1.8 in Reading, and the font size
carries --doc-text-scale and --doc-zoom on top. 2px was tuned at Reading 1x, so:

docs 1.15 1.0x box 4.5px low
reading 1.8 1.0x box 0.5px low <- the one it was picked in
reading 1.8 1.6x box 3.5px low
docs 1.15 1.6x box 2.5px low

Same cause, second symptom: an inline label makes the line box taller than the
text needs, so every task row was 23.9px against 16.9px for a bullet row holding
the same words — the checkbox pushed down inside it and task lists out of step
with every other list. Making the label exactly one line tall and centring the
box inside it fixes both: a task row is now 16.9px, the same as a bullet row.

The insertion panel drew the same list from its own markup and drifted the other
way (+2.5px at 1x, -2.5px at 1.6x, so no constant fixes both). Its box carries
the offset itself, derived the same way, since that markup has no label.

Browser test measures the gap between the box's centre and the centre of the
first line of its label, over both doc styles at 1x and 1.6x, in the editor and
in the panel. Reverting the CSS fails it: "panel checkbox sits on its line: off
by [2.5]".

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

client/app.css

@@ -1202,13 +1202,28 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
 /* --- task lists --- */
 .tiptap ul[data-type='taskList'] { list-style: none; padding-left: 4px; margin: 0.4em 0; }
 .tiptap ul[data-type='taskList'] li { display: flex; align-items: flex-start; gap: 8px; margin: 3px 0; }
-.tiptap ul[data-type='taskList'] li > label { margin-top: 2px; flex: 0 0 auto; }
+/* Centre the box on the first line of its own label, whatever that line is.
+   A fixed nudge cannot: the line box is 1em * --doc-line, and both halves move
+   — --doc-line is 1.15 in Docs style and 1.8 in Reading, and the font size
+   carries --doc-text-scale and --doc-zoom on top. 2px happened to be right at
+   Reading 1x and was up to 4.5px out everywhere else. Making the label exactly
+   one line tall and centring inside it is correct at every size, and keeps the
+   box on the FIRST line when the label wraps. */
+.tiptap ul[data-type='taskList'] li > label {
+  display: flex; align-items: center; height: calc(1em * var(--doc-line)); flex: 0 0 auto;
+}
 .tiptap ul[data-type='taskList'] li > div { flex: 1; }
 .tiptap ul[data-type='taskList'] input[type='checkbox'] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
 .tiptap ul[data-type='taskList'] li[data-checked='true'] > div { color: var(--text-3); text-decoration: line-through; }
 /* task lists rendered in suggestion insertion panels */
 .sugg-ins-block ul[data-type='taskList'] { list-style: none; padding-left: 0; }
 .sugg-ins-block .task-item { display: flex; align-items: flex-start; gap: 8px; }
+/* Same first-line centring as the editor's task list. This markup has no label
+   to make one line tall, so the box carries the offset itself — derived, not a
+   nudge: it drifted +2.5px at 1x and -2.5px at 1.6x, so no constant fixes both. */
+.sugg-ins-block .task-item > input[type='checkbox'] {
+  flex: 0 0 auto; margin: calc((1em * var(--doc-line) - 15px) / 2) 0 0;
+}
 .sugg-ins-block .task-item.checked > span { color: var(--text-3); text-decoration: line-through; }
 
 /* --- tables --- */

test/browser.js

@@ -636,6 +636,21 @@ async function main() {
   }, listSugg.suggestion_id)
   console.log('✓ list suggestion: only the added item renders as inserted')
 
+  // Distance from a checkbox's centre to the centre of the FIRST line of its own
+  // label. A fixed margin-top cannot hold this: the line box is 1em * --doc-line,
+  // and both the line height (1.15 in Docs style, 1.8 in Reading) and the font
+  // size (--doc-text-scale, --doc-zoom) move underneath it.
+  const checkboxDrift = (rowSel, labelSel) => page.evaluate(([rows, label]) =>
+    [...document.querySelectorAll(rows)].map(li => {
+      const box = li.querySelector('input[type="checkbox"]').getBoundingClientRect()
+      const node = document.createTreeWalker(li.querySelector(label), NodeFilter.SHOW_TEXT).nextNode()
+      const r = document.createRange()
+      r.setStart(node, 0)
+      r.setEnd(node, Math.min(4, node.length))
+      const line = r.getClientRects()[0]
+      return Math.abs((box.top + box.height / 2) - (line.top + line.height / 2))
+    }), [rowSel, labelSel])
+
   // --- new blocks (heading + list) render FORMATTED in the insertion panel ---
   const blockSugg = await page.evaluate(async () => {
     const id = location.pathname.split('/').pop()
@@ -646,7 +661,7 @@ async function main() {
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify({
         block_index: li,
-        replacement_markdown: snap.blocks[li].markdown + '\n\n## Sources\n\n- one **bold** source',
+        replacement_markdown: snap.blocks[li].markdown + '\n\n## Sources\n\n- one **bold** source\n\n- [ ] and a task in the panel',
       }),
     })).json())
   })
@@ -654,6 +669,9 @@ async function main() {
   await page.waitForSelector('.tiptap .sugg-ins-block', { timeout: 5000 })
   assert.ok(await page.$('.tiptap .sugg-ins-block h2'), 'inserted heading renders as a heading')
   assert.ok(await page.$('.tiptap .sugg-ins-block ul li strong'), 'inserted list renders as bullets with marks')
+  const panelDrift = await checkboxDrift('.sugg-ins-block .task-item', 'span')
+  assert.ok(panelDrift.length, 'panel renders a task item')
+  assert.ok(Math.max(...panelDrift) <= 1, 'panel checkbox sits on its line: off by ' + JSON.stringify(panelDrift))
   await page.evaluate(async sid => {
     const id = location.pathname.split('/').pop()
     await fetch(`/api/docs/${id}/suggestions/${sid}/reject`, { method: 'POST' })
@@ -1449,6 +1467,27 @@ async function main() {
   await waitFor(async () => !!(await page.$('.tiptap iframe.html-embed')), 'seeded HTML embed renders in the editor')
   console.log('✓ task lists + tables + HTML embed render in the editor')
 
+  // 2px was tuned at Reading 1x and was 4.5px out in Docs style, so measure the
+  // combinations rather than the one the number was picked in
+  const priorStyle = await page.evaluate(() => document.documentElement.getAttribute('data-doc-style'))
+  const priorScale = await page.evaluate(() => document.documentElement.style.getPropertyValue('--doc-text-scale'))
+  for (const [style, scale] of [['docs', '1'], ['reading', '1'], ['reading', '1.6'], ['docs', '1.6']]) {
+    await page.evaluate(([s_, z]) => {
+      document.documentElement.dataset.docStyle = s_
+      document.documentElement.style.setProperty('--doc-text-scale', z)
+    }, [style, scale])
+    const drift = await checkboxDrift('.tiptap ul[data-type="taskList"] li:not(.task-item)', 'div')
+    assert.ok(drift.length, `task rows to measure in ${style} at ${scale}x`)
+    assert.ok(Math.max(...drift) <= 1, `checkbox centred in ${style} at ${scale}x: off by ${JSON.stringify(drift)}`)
+  }
+  await page.evaluate(([s_, z]) => {
+    if (s_ === null) delete document.documentElement.dataset.docStyle
+    else document.documentElement.dataset.docStyle = s_
+    if (z) document.documentElement.style.setProperty('--doc-text-scale', z)
+    else document.documentElement.style.removeProperty('--doc-text-scale')
+  }, [priorStyle, priorScale])
+  console.log('✓ task checkboxes stay on the first line across doc styles and text sizes')
+
   // --- table columns resize by dragging a cell border, and the width sticks ---
   const colWidths = () => page.evaluate(() =>
     [...document.querySelectorAll('.tiptap table:first-of-type tr:first-child > *')]