Looks fine on my machine - my guess is that your primary font does not contain all the glyphs used (e.g. the box-drawing chars), so its falling back to another font just for those glyphs, causing inconsistencies.

It seems to only mess it up on mobile. Desktop Chrome seems fine. Mobile Chrome is all I've tested on.

Ah, in that case you might want:

    text-size-adjust: none;
    -webkit-text-size-adjust: none;

(it's infuriating that these options need to exist!)

How do you set options for chrome on iPhone and android?

Sorry for the naive question, I never figured this out.

You could use a browser that supports extensions on Andriod, iOS will protect you from such nefarious things though.

iOS supports browser extensions, and has done for some time - e.g. https://apps.apple.com/us/app/makeover-custom-css/id16023611... (which demonstrates custom HN CSS in the demo screenshots!)

These are in-page CSS controls, not browser config options (no idea how those works, I avoid mobile platforms)

First is using a monospace font, second is aligning line height to font height. Third includes a bit of tweaking and trying different sizes.

Your best bet is to use a good fixed width don't with broad character support. Some are better or worse than others. Cascadia Code and Fira Code work pretty well with differing characteristics and both have nerd don't variants.

Emoji alignment is another problem.