## Why Task-list checkboxes used MDXEditor defaults: the unchecked border was nearly invisible, the box sat about 5px above the text centre, and there was no hover state. Separately, while typing the caret sat flush on the bottom edge of the document pane.

## What changed - `packages/editor/src/styles.css` and `apps/web/src/theme.css`. Checkbox: 16px box, `--color-control-edge` border, `--radius-sm`, `--shadow-resting`, centred on the first line with `1lh`; hover fill `--color-selected`; checked is brand fill with a white check that eases in over `--duration-fast` (disabled under reduced motion); focus ring uses the focus tokens. - `[data-plan-scroll]` gets `scroll-padding-block: 4rem 30%`, so the browser keeps the caret about a third above the bottom.

## Screenshots Before checkboxes: 

After checkboxes: 

Caret after typing 60 lines (before, the caret is 0.6px from the pane bottom; after, 238px):  

Phone (390x844): caret gap 0.8px before, 216px after.

## Testing - `bun run ci`, `bun run types`, design record and contract checks: pass. - Verified in headless Chromium against a seeded task-list document (desktop and phone). Local e2e is suspended; relying on PR CI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)





**Review:** Changes needed (small, none blocking the checkbox itself)

Checked in headless Chromium on this branch (1x, 2x, phone 390x844, reduced motion) against a seeded task list, with the PR rules stripped for "before".

**Checkbox: good.** Calm and native-looking at 1x and 2x. The box is now centred on the first line for short, wrapped, nested and checked items (computed top 4.8px of a 25.6px line). Hover fill, brand checked state and the white check all read well; reduced motion correctly drops the check animation.

**Findings**

1. `packages/editor/src/styles.css:2585` (`scroll-padding-block: 4rem 30%`) is too much. At 1440x900 the pane is 791px tall, so 30% is about 237px. Any caret in the bottom 30% now makes the browser scroll: clicking a paragraph at 85% down and typing one character jumped the page 141px, and each ArrowDown into that zone scrolls to hold the caret about 237px up. Before, none of that moved. It also shifts `scrollIntoView({ block: "center" })`, used by comment and decision jumps (`scroll.ts` `scrollToKey`) and Planner change-scroll (`changes.ts:482`): targets land at about 39% of the pane height instead of 50% (about 86px high). Suggest a fixed `scroll-padding-block-end` of about 6rem (about 96px, same on phone) so the caret stays off the edge without moving mid-pane typing. If the 39% landing is wanted, say so; otherwise it is a side effect. 2. `styles.css:2593-2650` selectors target hashed CSS-module classes (`[class*="_listItemUnchecked"]`). They break silently if MDXEditor renames them, and the repo has no precedent for this selector. `PLAN_LEXICAL_THEME` in `packages/editor/src/plan-theme.ts` already spreads MDXEditor's `lexicalTheme`, which exposes `listitemChecked` and `listitemUnchecked`. Please append plan-owned classes instead: `listitemChecked: \`${lexicalTheme.listitemChecked} plan-task-checked\``, and the same for unchecked. Then select `.plan-task-checked` / `.plan-task-unchecked` (AGENTS.md calls out adding theme classes when replacing MDXEditor styles). This is feasible and cheap. 3. `styles.css:2605` and `:2657` set `transition-property` with no duration, and computed `transition-duration` is 0s, so the background and border change never animates. Either add `transition-duration: var(--duration-fast)` or drop the dead property and its reduced-motion override. The check-in animation does run. 4. Nit: focus uses `:focus`, so after a mouse click the toggled box keeps a brand border (and a tinted fill on unchecked) until blur. It reads as a stuck hover. `:focus-visible` would limit it to keyboard use.

Not an issue: a plain bullet inside a task list also gets a box. Same on main (MDXEditor treats the whole list as a checklist).

Screenshots: `.design-orchestrator/audit-2026-10-07/shots/review-342/`.

Addressed in 52323979: (1) `scroll-padding-block-end: 6rem` only; caret gap is 96px on desktop and phone, mid-pane typing no longer scrolls. It does still shift `block: center` jumps up by about half the padding (about 48px, 6% of the pane); I accepted that rather than add compensation code, say if you want it scoped. (2) Plan-owned `plan-task-checked` and `plan-task-unchecked` classes added under `list` in PLAN_LEXICAL_THEME (the keys are nested there, not top-level); hashed selectors removed. (3) Transition now has `var(--duration-fast)`. (4) Focus tint uses `:focus-visible`. CI is green.