List numbers overflow on mobile devices

[RReverser]

Looks like once we hit 100 posts, we started overflowing list item numbers for blog posts on mobile viewports, so they end up getting truncated.

Screenshot from DevTools emulation of Pixel 2:

iPhone 5 / SE:

iPhone X:

Also confirmed manually on my Android phone.

[yozaam]

Hello! I am a newcomer but i really want to fix this, I have identified the problem and have signed the CLA, thank you so much:

The "1" of "100" etc is going outside the viewport,
It happens above 200% zooom on desktop / on mobiles < max-width:770px

I will make a small change in main.css and give the offset a slightly greater value such as
--offset: 12px; in this line for screens less than 770 px

The value 12px will give it space for the "1" to come inside the padding:

Currently, the --offset for the padding is too small to accommodate 3 characters:

This is how it will look at 12px:

And like this at 14px: ( so we won't have this issue again after post no. 999 )

Thanks again,
yozaam

[RReverser]

@tomayac Could you please help out with review - there are two open PRs (#396 and #430) that fix this issue in different ways, but I don't know enough to tell which one is better.

[tomayac]

I would go with #396, since it's the more flexible one of the two. Should we later on decide to change the --offset, everything will continue to look right.

[RReverser]

Thanks @tomayac, I shall do that then.