markdown-editor icon indicating copy to clipboard operation
markdown-editor copied to clipboard

Incorrect numbering display in an ordered list.

Open u4aew opened this issue 1 year ago • 1 comments

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

https://github.com/user-attachments/assets/2d3f5d4f-0bca-430a-8d1b-cc41a2c04d6d

u4aew avatar Dec 04 '24 16:12 u4aew

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: CleanShot 2024-12-18 at 12 50 00

The result: CleanShot 2024-12-18 at 12 49 15

karisDev avatar Dec 18 '24 09:12 karisDev