Bug: ordered list items have margin that looks inconsistent between browsers

[alinalobast]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Margin of ordered list items is inconsistent across browsers.
You can repro it in the demo editor on https://draftjs.org/

Chrome:

Firefox:

You can see that OL and UL items are not aligned. In Chrome in does not look too much off, but in Firefox it becomes more noticeable.

I suspect this is happening because of the following css:

.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before {
    left: -36px;
    position: absolute;
    text-align: right;
    width: 30px;
}

What is the expected behavior?
I would expect OL and UL to be aligned in all browsers like

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
Affected version of Draft: 0.10.5. You can repro in any version of the browser. I was using Chrome 71.0.3578.98 (Official Build) (64-bit) and Firefox 64.0.2 (64-bit)

[thibaudcolas]

Nice catch! It's indeed inconsistent between browsers, but it looks good to me in Chrome (list prefix right-aligned).

In your proposal the list prefixes seem to be left-aligned, which might look ok with a 1. but would quickly break down with e.g. 10. (1 having one of the smallest glyphs of all numbers).

[alinalobast]

Yeah, making them left-aligned is not the best option. How about centering them instead of prioritizing the consistent spacing between bullets and text (I think right now it looks right aligned)?

[thibaudcolas]

To me it looks better right-aligned, as that's how browsers render them by default. but let’s see what other people / the maintainers of Draft.js think. If it was right-aligned, the spacing between the . and the text would be consistent.