Website: Text boxes text overlaps with smaller fonts.

quick-lint / quick-lint-js

quick-lint-js finds bugs in JavaScript programs

https://quick-lint-js.com

GNU General Public License v3.0

1.52k stars 192 forks source link

Website: Text boxes text overlaps with smaller fonts. #1153

Open LeeWannacott opened 7 months ago

LeeWannacott commented 7 months ago

https://quick-lint-js.com/blog/version-3.0/

Boxes text scale inversely with font size. (overlap the smaller the font size is set in your browser)

strager commented 7 months ago

It looks like you're shrinking the proportional-width font size, but not the monospace font size.

CSS breakpoints are based on the proportional-width font size.

I think the correct solution would be to make the layout responsive instead of relying on CSS breakpoints. This would mean switching from CSS grid to CSS flexbox for .eslint-comparison.