fix(web): list styling

[hejsztynx]

Summary

Some of the web's list styling was working poorly

• the padding for the unordered and checkbox lists was calculated wrong. The marginLeft, gapWidth and bulletSize / checkboxSize were used improperly,
• the bullets and checkboxes should now be centered on the Y axis, to the text baseline, regardless for their sizes,
• ol marks are now aligned to the right of the marginLeft space (they sit within it), making the gapWidth always identical,
• ol marks get additional margin, if their values are too large to fit within the initial marginLeft

Test Plan

Experiment with different values inside defaultHtmlStyle.ts inside example-web/

Screenshots / Videos

The ol markers overflowing bug:

Before:

Screen.Recording.2026-07-28.at.14.16.14.mov

After:

Screen.Recording.2026-07-28.at.14.15.07.mov

Compatibility

OS	Implemented
iOS	❌
Android	❌
Web	✅

Checklist

• E2E tests are passing
• Required E2E tests have been added (if applicable)

[Copilot]

Pull request overview

This PR improves web list layout/styling for unordered, ordered, and checkbox lists by correcting padding calculations, aligning markers more consistently, and dynamically sizing the ordered-list marker column based on the largest counter value.

Changes:

• Fixes ul / checkbox list padding math and adjusts marker vertical alignment.
• Updates ol marker layout so the marker column is right-aligned and can expand to fit larger counter values.
• Adds runtime digit-count measurement for ordered lists (Tiptap editor plugin + read-only hook) and adds Playwright visual coverage for extended ordered-list margins.

Reviewed changes

Copilot reviewed 7 out of 55 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/web/useOrderedListMarkerWidth.ts	Adds a DOM-based effect to compute/set --et-ol-digits for rendered <ol> elements.
src/web/pmPlugins/OrderedListMarkerWidthPlugin.ts	Adds a ProseMirror/Tiptap plugin that decorates ordered lists with --et-ol-digits.
src/web/EnrichedTextInput.tsx	Registers the new ordered-list marker width plugin in the editor extension list.
src/web/EnrichedText.tsx	Hooks the new ordered-list digit measurement into read-only rendering.
src/web/EnrichedText.css	Adjusts list padding/marker positioning and implements an expandable ordered-list marker column.
.playwright/tests/paragraphStylesVisual.spec.ts	Adds visual regression coverage for extended ordered-list marker column in the editor.
.playwright/tests/enrichedTextVisual.spec.ts	Adds visual regression coverage for extended ordered-list marker column in read-only display.

Comments suppressed due to low confidence (1)

src/web/EnrichedText.css:348

• top uses var(--et-checkbox-box-size) without a fallback, so if the variable is not set the calc(...) becomes invalid and checkbox alignment will regress. Add the same fallback used for width/height.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 55 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (3)

src/web/pmPlugins/OrderedListMarkerWidthPlugin.ts:34

• state.doc.descendants stops descending once it finds an orderedList because the callback returns false. That means nested ordered lists inside list items won’t get --et-ol-digits set, so their marker column width may still overflow.
  src/web/EnrichedText.css:347
• This top calculation uses var(--et-checkbox-box-size) without a fallback, while other uses of the same variable in this file include , 24px. If the CSS variable is missing for any reason, the whole calc() becomes invalid and the checkbox won’t be vertically aligned.
  src/web/useOrderedListMarkerWidth.ts:16
• The start attribute parsing forces start to be > 0. HTML <ol start="0"> or negative starts are valid, and using 1 here can underestimate digit width and reintroduce marker overflow for those cases. Also, Number(null) becomes 0, so an absent start attribute currently gets treated as 0 and then coerced to 1 only because of the > 0 check; it’s clearer to explicitly treat a missing attribute as default 1.