Incorrect numbering display in an ordered list.

[u4aew]

Current Issue:

When typing a number, the ordered list's numbering gets misaligned.

Expected Outcome:

Correct display of numbers in the list.

14.5.1

demo-1.mp4

[karisDev]

It seems like a CSS issue, counter has a default padding which cant have auto width. But I was able to fix this in a very bad way by customizing display property:

ol {
  display: grid;
  padding-left: 0;
  grid-template-columns: max-content 1fr;
  align-items: center;
  counter-reset: grid-ol-counter 9998;
}

ol li {
  display: contents;
}

ol li::before {
  counter-increment: grid-ol-counter;
  text-align: right;
  display: inline;
  content: counter(grid-ol-counter) ". ";
}

Before:

The result: