Skip to content

Fix ordered list layout to handle long numbers in <ol> #1356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lakshya1goel opened this issue Feb 14, 2025 · 3 comments · Fixed by #1329
Closed

Fix ordered list layout to handle long numbers in <ol> #1356

lakshya1goel opened this issue Feb 14, 2025 · 3 comments · Fixed by #1329
Assignees
Labels
a-content Parsing and rendering Zulip HTML content, notably message contents a-design Visual and UX design

Comments

@lakshya1goel
Copy link
Contributor

The ordered list layout currently uses a fixed width of 20px for the marker column:

width: 20, // TODO handle long numbers in <ol>, like https://github.com/zulip/zulip/pull/25063

This can cause layout issues when the list starts with large numbers (e.g., "9999. first")

Observed Behavior:

The dot (.) moves to the next line when the marker has 2 or more digits.
Example: "10." appears misaligned, with the dot shifting below the number in the screenshot below.

Expected Behavior:

The marker column should adjust dynamically to accommodate longer numbers without breaking the layout.

lakshya1goel added a commit to lakshya1goel/zulip-flutter that referenced this issue Feb 14, 2025
@gnprice gnprice added a-content Parsing and rendering Zulip HTML content, notably message contents a-design Visual and UX design labels Feb 14, 2025
@gnprice gnprice added this to the M6: Post-launch milestone Feb 14, 2025
lakshya1goel added a commit to lakshya1goel/zulip-flutter that referenced this issue Feb 21, 2025
lakshya1goel added a commit to lakshya1goel/zulip-flutter that referenced this issue Feb 22, 2025
@shkshreyas
Copy link

I want to handle this

@shkshreyas
Copy link

shkshreyas commented Feb 22, 2025

Solved The Issue

@lakshya1goel
Copy link
Contributor Author

Hi @shkshreyas, there is already an open PR #1329 under review to fix this issue, Please have a look. Thanks!

lakshya1goel added a commit to lakshya1goel/zulip-flutter that referenced this issue Feb 26, 2025
@gnprice gnprice closed this as completed in ce338ab Mar 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a-content Parsing and rendering Zulip HTML content, notably message contents a-design Visual and UX design
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants