Vertically center task list checkboxes with first line

[jhodapp]

Description

Fixes a visual alignment bug in the coaching session Notes editor: checkbox (task list) bullets were vertically off-center, with the checkbox sitting above the optical center of its text line.

GitHub Issue: Fixes #432

Changes

• Center the task list checkbox against the first line of text by giving the label display: flex; align-items: center and a 1.6em height matching the editor's text line-height (replaces the prior margin-top nudge).
• Zero the task item paragraph margin so the checkbox and text share the same top.
• Keep align-items: flex-start on the li so the checkbox stays on the first line for wrapped, multi-line items.
• Bump caniuse-lite (browserslist DB) to 1.0.30001800.

Screenshots / Videos Showing UI Changes

A before/after of the Notes editor task list would be helpful — checkbox aligned with the first line of both single- and multi-line items.

Testing Strategy

Open a coaching session's Notes editor, add a task/checkbox list with both short and long (wrapping) items, and verify each checkbox is vertically centered on the first line of its text.

[greptile-apps]

Greptile Summary

This PR fixes a visual alignment bug in the coaching-notes TipTap editor where task-list checkboxes sat above the optical centre of their text line. The fix replaces a margin-top nudge with a proper flex layout on the label and zeros the paragraph margin inside the content div so the checkbox and text share the same vertical baseline.

• simple-editor.scss: Gives the task-list label display:flex; align-items:center; height:1.6em so the checkbox is centred within exactly one line-height, and adds p { margin: 0 } to the sibling div so the paragraph doesn't push text away from the checkbox. CSS specificity is correct — the new rule at ul[data-type="taskList"] li > div p (0,3,3) overrides both the global p (0,2,1) and the general list-item p (0,1,3) rules. The align-items: flex-start on li is preserved, keeping the checkbox pinned to the first line for multi-line items.
• package-lock.json: Bumps caniuse-lite to 1.0.30001800 and baseline-browser-mapping to 2.10.41; the rest of the diff is npm reclassifying "peer": true metadata, which has no runtime effect.

Confidence Score: 5/5

Safe to merge — the change is scoped entirely to CSS for a single editor widget and has no JS/TypeScript surface.

The CSS math is correct: height:1.6em on a flex label correctly centres the checkbox within one text line, and p { margin:0 } in the task-item div prevents the paragraph from adding unwanted top spacing. Specificity overrides chain as expected. The only note is that the 1.6em value is silently coupled to line-height: 1.6 elsewhere in the file — a one-line comment would protect against drift.

No files require special attention beyond the minor comment suggestion on src/styles/simple-editor.scss.

Important Files Changed

Filename	Overview
src/styles/simple-editor.scss	Replaces the margin-top nudge on the task-list label with display:flex/align-items:center/height:1.6em, and zeros paragraph margin in the content div; the flex math is correct and the specificity chain correctly overrides the general list-item p-margin rules.
package-lock.json	Bumps caniuse-lite from 1.0.30001769 to 1.0.30001800 and baseline-browser-mapping from 2.10.0 to 2.10.41; remaining diff is npm's reclassification of "peer": true metadata across many existing packages, which has no runtime impact.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    LI["li\ndisplay: flex\nalign-items: flex-start\ngap: 0.5rem"]
    LABEL["label (flex-shrink: 0)\ndisplay: flex\nalign-items: center\nheight: 1.6em"]
    CB["input[type=checkbox]\nmargin: 0\naccent-color: var(--editor-focus-border)"]
    DIV["div (flex: 1)"]
    P["p\nmargin: 0 ← NEW"]

    LI --> LABEL
    LI --> DIV
    LABEL --> CB
    DIV --> P

    style LABEL fill:#d1fae5,stroke:#059669
    style P fill:#d1fae5,stroke:#059669

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    LI["li\ndisplay: flex\nalign-items: flex-start\ngap: 0.5rem"]
    LABEL["label (flex-shrink: 0)\ndisplay: flex\nalign-items: center\nheight: 1.6em"]
    CB["input[type=checkbox]\nmargin: 0\naccent-color: var(--editor-focus-border)"]
    DIV["div (flex: 1)"]
    P["p\nmargin: 0 ← NEW"]

    LI --> LABEL
    LI --> DIV
    LABEL --> CB
    DIV --> P

    style LABEL fill:#d1fae5,stroke:#059669
    style P fill:#d1fae5,stroke:#059669

Loading

_{Reviews (1): Last reviewed commit: "fix(coaching-notes): vertically center t..." | Re-trigger Greptile}