Ordered Lists cut off the first digit of 2-digit numbers
coredumperror opened this issue · comments
Describe the bug
The first digit of the 10, 11, 12, etc. of an ordered list gets cut off.
Which terms did you search for in the documentation and issue tracker?
"numbered list" and "ordered list"
Environment
Admittedly, I'm on an old version of Wagtail (v2.3), so this may have already been fixed. But I don't see any relevant record of "numbered list" or "ordered list" in this repo's issue queue or in wagtail's.
Steps to reproduce
Create a Rich Text field, start an ordered list, and create 10+ elements in that list.
Expected behavior
The 2-digit numbers shouldn't be sliced off.
Actual behavior
Here's what it looks like:
Suggested solution
The problem is that the CSS in the Draftail editor doesn't put enough margin-left on the .Draftail-block--ordered-list-item elements. It's 1.5em, but it should be at least 2em.
In preparing this ticket, I'm beginning to realize that this may actually be a Wagtail-specific bug, as the incorrect CSS is not actually in Draftail itself. But a quick perusal of Wagtail's repo also doesn't reveal the CSS rule in question, so I'm pretty confused as to where this bug originates.
I can confirm that this doesn't happen on the demo editor at https://draftjs.org/, though.
Just came across this bug, and can confirm it's a CSS issue - the left property of the CSS rule .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before doesn't leave room for the ordered-list when it hits double digits - you can adjust the left property of that rule by a few pixels to fix it.
Better late than never, I’m testing this now and can confirm the issue is specific to Wagtail’s implementation. I’ve opened this on the Wagtail project: wagtail/wagtail#7019
The issue is with Wagtail not giving any padding around the editor. I’m not too sure whether we want to keep doing that and find another way for numerals to overflow, or add a bit of padding.