Ordered list clips numbers after 100 list items

[SethFalco]

Using the styles from sindresorhus/github-markdown-css, I've noticed once an ordered list crosses over 100 items, the numbers/indexes start clipping.

Steps to Reproduce

Use the following Markdown or HTML content with the CSS.

Markdown

1. John Wick: Chapter 4
2. The Last of Us
3. The Menu
4. John Wick
5. John Wick: Chapter 3 - Parabellum
6. John Wick: Chapter 2
7. 65
8. Ant-Man and the Wasp: Quantumania
9. Stranger Things
10. Severance
11. Fringe
12. Superman and Lois
13. Black Panther: Wakanda Forever
14. Lost
15. Black Mirror
16. American Horror Story
17. The X Files
18. The Handmaid's Tale
19. Manifest
20. The Hunger Games: The Ballad of Songbirds & Snakes
21. From
22. The 100
23. Blade Runner 2049
24. Dark
25. The Peripheral
26. Jurassic World Dominion
27. 1899
28. The Matrix Resurrections
29. See
30. Shang-Chi and the Legend of the Ten Rings
31. Donnie Darko
32. Extraordinary
33. The OA
34. Heroes
35. A Quiet Place
36. Ant-Man
37. Aquaman and the Lost Kingdom
38. Knights of the Zodiac
39. Dark City
40. Blindspot
41. Idiocracy
42. Snowpiercer
43. Last Light
44. Blue Beetle
45. Arcadia
46. Morbius
47. Coherence
48. The Nevers
49. Man of Steel
50. Jurassic World
51. Invasion
52. A Quiet Place Part II
53. The Invisible Man
54. Sense8
55. Snowpiercer
56. Left Behind: Rise of the Antichrist
57. Ant-Man and the Wasp
58. Quantum Leap
59. Venom: Let There Be Carnage
60. Legion
61. Resident Evil: Welcome to Raccoon City
62. Travelers
63. Wifelike
64. A.I. Artificial Intelligence
65. Alias
66. The Giver
67. Superman
68. Level 16
69. 10 Cloverfield Lane
70. Escape Room
71. The Pretender
72. Daredevil: Born Again
73. Journey to the Center of the Earth
74. The Island
75. District 9
76. Vesper
77. Chronicle
78. The 5th Wave
79. What Happened to Monday
80. Equilibrium
81. The Darkest Minds
82. Brightburn
83. Love and Monsters
84. Superman Returns
85. Dark Angel
86. The Rain
87. Dark Matter
88. Geostorm
89. Triangle
90. Glitch
91. I Am Not Okay with This
92. The Witch: Part 1 - The Subversion
93. A Scanner Darkly
94. The Happening
95. Torchwood
96. Escape Room: Tournament of Champions
97. Into the Night
98. Between
99. Journey 2: The Mysterious Island
100. Roswell
101. Left Behind
102. Highlander
103. The Circle
104. Avatar: Fire and Ash
105. Fort Salem
106. V
107. The Signal
108. Brave New World
109. The Dead Zone
110. The Society
111. A Quiet Place: Day One
112. The Silence
113. Hidden
114. The Cloverfield Paradox
115. Dollhouse
116. The Gifted
117. Forever
118. 3%
119. Take Shelter
120. Next
121. Journey to the Centre of the Earth
122. Transcendence
123. Andromeda
124. Get Smart
125. Sanctuary
126. No Ordinary Family
127. Humans
128. Land of the Lost
129. Lifeforce
130. Limitless
131. The Girl with All the Gifts
132. Firestarter
133. I Am Mother
134. As the Gods Will
135. Simulant
136. Mouse
137. Land of the Lost
138. The Titan
139. Another Earth
140. Continuum
141. Morgan
142. Freaks
143. Heroes Reborn
144. Pulse
145. Disturbing Behavior
146. Primeval
147. Oxygen
148. Psycho-Pass
149. Kyle XY
150. The Handmaid's Tale
151. Paradise Hills
152. The First Purge
153. V
154. The 4400
155. Almost Human
156. The Backrooms
157. Millennium
158. Resident Evil: Infinite Darkness
159. Maggie
160. Ashes to Ashes
161. SurrealEstate
162. Black Mirror: Bandersnatch
163. Soldier
164. Serial Experiments Lain
165. The Listener
166. Mother/Android
167. The Tomorrow People
168. Relic Hunter
169. Tau
170. Control
171. Attack on Titan
172. The Thinning: New World Order
173. Bionic Woman
174. Impulse
175. Intelligence
176. Emergence
177. Cube
178. Criminal Minds
179. Supernatural
180. Scream
181. Knock at the Cabin
182. Smile
183. Prison Break
184. Sherlock
185. Charmed
186. Poirot
187. Hereditary
188. Spiral: From the Book of Saw
189. Scream: The TV Series
190. The Witch
191. Evil
192. Haunted Mansion
193. The Magicians
194. Midnight Mass
195. Orphan
196. Orphan: First Kill
197. Constantine 2
198. Run
199. MacGyver
200. Percy Jackson and the Olympians
201. Dungeons & Dragons: Honour Among Thieves
202. The Super Mario Bros. Movie

HTML

<div class="markdown-body">
  <ol>
    <li>John Wick: Chapter 4</li>
    <li>The Last of Us</li>
    <li>The Menu</li>
    <li>John Wick</li>
    <li>John Wick: Chapter 3 - Parabellum</li>
    <li>John Wick: Chapter 2</li>
    <li>65</li>
    <li>Ant-Man and the Wasp: Quantumania</li>
    <li>Stranger Things</li>
    <li>Severance</li>
    <li>Fringe</li>
    <li>Superman and Lois</li>
    <li>Black Panther: Wakanda Forever</li>
    <li>Lost</li>
    <li>Black Mirror</li>
    <li>American Horror Story</li>
    <li>The X Files</li>
    <li>The Handmaid&#39;s Tale</li>
    <li>Manifest</li>
    <li>The Hunger Games: The Ballad of Songbirds &amp; Snakes</li>
    <li>From</li>
    <li>The 100</li>
    <li>Blade Runner 2049</li>
    <li>Dark</li>
    <li>The Peripheral</li>
    <li>Jurassic World Dominion</li>
    <li>1899</li>
    <li>The Matrix Resurrections</li>
    <li>See</li>
    <li>Shang-Chi and the Legend of the Ten Rings</li>
    <li>Donnie Darko</li>
    <li>Extraordinary</li>
    <li>The OA</li>
    <li>Heroes</li>
    <li>A Quiet Place</li>
    <li>Ant-Man</li>
    <li>Aquaman and the Lost Kingdom</li>
    <li>Knights of the Zodiac</li>
    <li>Dark City</li>
    <li>Blindspot</li>
    <li>Idiocracy</li>
    <li>Snowpiercer</li>
    <li>Last Light</li>
    <li>Blue Beetle</li>
    <li>Arcadia</li>
    <li>Morbius</li>
    <li>Coherence</li>
    <li>The Nevers</li>
    <li>Man of Steel</li>
    <li>Jurassic World</li>
    <li>Invasion</li>
    <li>A Quiet Place Part II</li>
    <li>The Invisible Man</li>
    <li>Sense8</li>
    <li>Snowpiercer</li>
    <li>Left Behind: Rise of the Antichrist</li>
    <li>Ant-Man and the Wasp</li>
    <li>Quantum Leap</li>
    <li>Venom: Let There Be Carnage</li>
    <li>Legion</li>
    <li>Resident Evil: Welcome to Raccoon City</li>
    <li>Travelers</li>
    <li>Wifelike</li>
    <li>A.I. Artificial Intelligence</li>
    <li>Alias</li>
    <li>The Giver</li>
    <li>Superman</li>
    <li>Level 16</li>
    <li>10 Cloverfield Lane</li>
    <li>Escape Room</li>
    <li>The Pretender</li>
    <li>Daredevil: Born Again</li>
    <li>Journey to the Center of the Earth</li>
    <li>The Island</li>
    <li>District 9</li>
    <li>Vesper</li>
    <li>Chronicle</li>
    <li>The 5th Wave</li>
    <li>What Happened to Monday</li>
    <li>Equilibrium</li>
    <li>The Darkest Minds</li>
    <li>Brightburn</li>
    <li>Love and Monsters</li>
    <li>Superman Returns</li>
    <li>Dark Angel</li>
    <li>The Rain</li>
    <li>Dark Matter</li>
    <li>Geostorm</li>
    <li>Triangle</li>
    <li>Glitch</li>
    <li>I Am Not Okay with This</li>
    <li>The Witch: Part 1 - The Subversion</li>
    <li>A Scanner Darkly</li>
    <li>The Happening</li>
    <li>Torchwood</li>
    <li>Escape Room: Tournament of Champions</li>
    <li>Into the Night</li>
    <li>Between</li>
    <li>Journey 2: The Mysterious Island</li>
    <li>Roswell</li>
    <li>Left Behind</li>
    <li>Highlander</li>
    <li>The Circle</li>
    <li>Avatar: Fire and Ash</li>
    <li>Fort Salem</li>
    <li>V</li>
    <li>The Signal</li>
    <li>Brave New World</li>
    <li>The Dead Zone</li>
    <li>The Society</li>
    <li>A Quiet Place: Day One</li>
    <li>The Silence</li>
    <li>Hidden</li>
    <li>The Cloverfield Paradox</li>
    <li>Dollhouse</li>
    <li>The Gifted</li>
    <li>Forever</li>
    <li>3%</li>
    <li>Take Shelter</li>
    <li>Next</li>
    <li>Journey to the Centre of the Earth</li>
    <li>Transcendence</li>
    <li>Andromeda</li>
    <li>Get Smart</li>
    <li>Sanctuary</li>
    <li>No Ordinary Family</li>
    <li>Humans</li>
    <li>Land of the Lost</li>
    <li>Lifeforce</li>
    <li>Limitless</li>
    <li>The Girl with All the Gifts</li>
    <li>Firestarter</li>
    <li>I Am Mother</li>
    <li>As the Gods Will</li>
    <li>Simulant</li>
    <li>Mouse</li>
    <li>Land of the Lost</li>
    <li>The Titan</li>
    <li>Another Earth</li>
    <li>Continuum</li>
    <li>Morgan</li>
    <li>Freaks</li>
    <li>Heroes Reborn</li>
    <li>Pulse</li>
    <li>Disturbing Behavior</li>
    <li>Primeval</li>
    <li>Oxygen</li>
    <li>Psycho-Pass</li>
    <li>Kyle XY</li>
    <li>The Handmaid&#39;s Tale</li>
    <li>Paradise Hills</li>
    <li>The First Purge</li>
    <li>V</li>
    <li>The 4400</li>
    <li>Almost Human</li>
    <li>The Backrooms</li>
    <li>Millennium</li>
    <li>Resident Evil: Infinite Darkness</li>
    <li>Maggie</li>
    <li>Ashes to Ashes</li>
    <li>SurrealEstate</li>
    <li>Black Mirror: Bandersnatch</li>
    <li>Soldier</li>
    <li>Serial Experiments Lain</li>
    <li>The Listener</li>
    <li>Mother/Android</li>
    <li>The Tomorrow People</li>
    <li>Relic Hunter</li>
    <li>Tau</li>
    <li>Control</li>
    <li>Attack on Titan</li>
    <li>The Thinning: New World Order</li>
    <li>Bionic Woman</li>
    <li>Impulse</li>
    <li>Intelligence</li>
    <li>Emergence</li>
    <li>Cube</li>
    <li>Criminal Minds</li>
    <li>Supernatural</li>
    <li>Scream</li>
    <li>Knock at the Cabin</li>
    <li>Smile</li>
    <li>Prison Break</li>
    <li>Sherlock</li>
    <li>Charmed</li>
    <li>Poirot</li>
    <li>Hereditary</li>
    <li>Spiral: From the Book of Saw</li>
    <li>Scream: The TV Series</li>
    <li>The Witch</li>
    <li>Evil</li>
    <li>Haunted Mansion</li>
    <li>The Magicians</li>
    <li>Midnight Mass</li>
    <li>Orphan</li>
    <li>Orphan: First Kill</li>
    <li>Constantine 2</li>
    <li>Run</li>
    <li>MacGyver</li>
    <li>Percy Jackson and the Olympians</li>
    <li>Dungeons &amp; Dragons: Honour Among Thieves</li>
    <li>The Super Mario Bros. Movie</li>
  </ol>
</div>

Screenshots

HTML from steps to reproduce above, and CSS from sindresorhus/github-markdown-css:

The same code, but with padding-left: 2em removed from .markdown-body ol.

Investigation

The issue is ultimately caused by:

.markdown-body ul,
.markdown-body ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}

— https://github.com/sindresorhus/github-markdown-css/blob/74e1bcc0522c478c3c83e04430784614795312a0/github-markdown-dark.css#L321

Just dropping the padding-left: 2em; allows the numbers/indexes to take as much space as they need, which matches the behavior on GitHub.

Related

• Encountered while investigating Ordered list clips numbers after 100 list items element-hq/element-web#28301

[hyrious]

GitHub clips too, I did a test here.

I don't think we should undo GitHub's style here since this repo aims to produce the CSS rendering like GitHub.com as much as possible. Users could just append their own rules to adjust the use case (for example, .markdown-body ol { padding-left: revert }, which is actually hardcoded 40px in chromium), but not in this repo. If someday GitHub changed some numbers in their styles, you can still use this tool to grab the latest CSS for use.

[SethFalco]

Ahh, alright I follow.
Yeah sure, I'll reopen the issue downstream then meanwhile.

Thanks for explaining and visualizing that for me!