Documentation: code examples messed up

[thany]

Describe the bug

Code examples are messed up in the documentation:

Did you try recovering your dependencies?

Not relevant. Maybe the website should give this a go 😊

Which terms did you search for in User Guide?

code examples, documentation

Environment

Output of npx create-react-app --info is irrelevant.

Firefox 90 on Windows 10, 4K screen. That's relevant 🙂

Steps to reproduce

(Write your steps here:)

1. https://create-react-app.dev/docs/getting-started
2. Scroll down to the code examples.

Expected behavior

Readable

Actual behavior

Not readable

Reproducible demo

Open the link I provided in Firefox on Windows 10 on a 4K screen (perhaps one or more of these conditions aren't even relevant). Or see screenshot. That's about all I can demo.

[thany]

So ehm, the obviousness of this bug is pretty, well, obvious, innit...

Maybe it's a good idea to put some priority behind this problem? It's on your HOMEPAGE, mates, as well as every other page that has code examples... I know I'd be deeply embarassed by an issue of this kind of magnitude.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[thany]

Issue still persists... Sorry mates, but aren't you at least a little bit embarassed by having such blatantly obvious visual rubbish, on your homepage no less?

Here, let me re-emphasize exactly how blatantly obvious:

[tnb24]

It's something on your side.

[thany]

No it isn't. It's an SVG that seems to be improperly authored.

[thany]

To be more precise, its font-size is way too small, and it contains "frames" that are being blown up to become the size that we see. But the font-size of 1.67, where it starts, is too small for my accessibility settings. I suppose trying to blow up those frames using viewBox wasn't the best of ideas.

This setting is not weird. It's just a setting to make sites slightly more readable to me. It's not an extension either, so we can't blame it on that. And sure okay it's on my side, but making tiny fonts and then zooming in on them is weird. And I reckon Mozilla cannot account for something like that when calculating minimum font size.

As for Chrome, it just simply fails to apply minimum font-size to SVG, which is a bug.