Checkbox mis-alignment on mobile views

[KyleMit]

Describe the bug Checkbox mis-alignment on mobile views

To Reproduce Steps to reproduce the behavior:

1. Go to https://stackoverflow.design/product/components/checkbox
2. Resize viewport to less than 640px

Expected behavior Checkboxes to be aligned with their labels

Screenshots

Example Checkboxes on Medium vs Small Screens

Zoomed in example of checkboxes with alignment lines

Example of checkbox itself being resized on small displays

Some important styling rules impacting this currently

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 101

Additional context

The culprit looks like it's the fact that we shrink the font to 11px for all screens under 640px

Worth noting that the main site actually has an additional edge case here. The checkbox inherits it's font from its parent, so if it's not nested in something with an explicit font, it'll get downsized 2px as well from 11px to 9px- this doesn't show up on stacks demo page, because the example panels set thefont-size` explicitly.

[ondrejkonec]

Hi @KyleMit! I think I found an issue and I would like to suggest possible changes. Is there any real example outside Stacks? I could not find any checkboxes on http://stackoverflow.com/.

That would be helpful. Thanks!