Skip to content

fix(web): fix list display on text wrap#679

Open
hejsztynx wants to merge 4 commits into
mainfrom
@ksienkiewicz/fix-web-list-wrapping-display
Open

fix(web): fix list display on text wrap#679
hejsztynx wants to merge 4 commits into
mainfrom
@ksienkiewicz/fix-web-list-wrapping-display

Conversation

@hejsztynx

@hejsztynx hejsztynx commented Jul 6, 2026

Copy link
Copy Markdown
Collaborator

Summary

When the text inside a list element was long enough to wrap, the bullet position was incorrect, it was at the bottom:

Screenshots / Videos

Before:

image

After:

image image

Compatibility

OS Implemented
iOS
Android
Web

Checklist

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

Copilot AI review requested due to automatic review settings July 6, 2026 11:29
@hejsztynx hejsztynx marked this pull request as draft July 6, 2026 11:29

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes list marker (bullet/number/checkbox) vertical alignment on the web when list item text wraps onto multiple lines in the EnrichedText editor/view, and adds visual regression coverage to prevent future regressions.

Changes:

  • Reworked <ul>/<ol> marker rendering to use inline markers (::before) aligned with wrapped text.
  • Updated checkbox list layout in both editor (checkboxList) and display (checkbox) modes to align the checkbox with wrapped content.
  • Added Playwright visual regression cases for wrapped unordered, ordered, and checkbox list items.

Reviewed changes

Copilot reviewed 3 out of 24 changed files in this pull request and generated 2 comments.

File Description
src/web/EnrichedText.css Adjusts list marker/checkbox positioning to align correctly with wrapped list text.
.playwright/tests/paragraphStylesVisual.spec.ts Adds visual snapshot tests for wrapped list items in the visual-regression editor page.
.playwright/tests/enrichedTextVisual.spec.ts Adds visual snapshot tests for wrapped list items in the EnrichedText display page.

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

Comment thread src/web/EnrichedText.css
Comment thread src/web/EnrichedText.css
@hejsztynx hejsztynx marked this pull request as ready for review July 6, 2026 12:06
@hejsztynx hejsztynx requested review from exploIF and kacperzolkiewski and removed request for exploIF July 6, 2026 12:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants