[Bug] NavBar display issues with smaller fonts.

[jebbster88]

Describe the bug When using smaller fonts in the browser, the nav bar doesn't render as expected.

To Reproduce Steps to reproduce the behavior:

In Chrome

1. Go to chrome://settings/?search=font
2. Set the font to small
3. Visit https://crypt.ee/docs
4. Look at the left nav bar (more noticeable when collapsed), Icons will not be (or barely be) visible.

In Firefox

1. Go to settings, search for font.
2. Change font size to 14 (my preference) from the default (16).
3. Visit https://crypt.ee/docs
4. Look at the left nav bar (more noticeable when collapsed), Icons will not be (or barely be) visible.

Expected behavior Nav bar should render correctly regardless of font size.

Screenshots

System Information (please complete the following information):

• Confirmed in Firefox (Linux and Windows), Chrome (Linux Only)

Additional context I assume this is related to the use of sizing based on font and the use of REM in the grid sizing. Adding font-size: 16px to the root html element seems to resolve it.

[johnozbay]

This right here is an absolute life-saver. Thank you 🙏🏻

As silly and stupid as this sounds like, didn't think about how the browser's default font size could wreck havoc on all rem sized grids we have.

The whole new rem design is based on a 16px grid, so for the time being, we're band-aid fixing this by passing in 16px to the root html element, but in the long run, we'll find a way to respect user's font-size choice in critical text based UI elements like the filenames / foldernames / text in editor etc.

I've fixed this in the alpha version now and linked this issue to our internal issue/release tracker. Once the update with this fix is out (should be today / tomorrow), this issue will be closed automatically, and you'll get a notification!

Thank you so much for your help with this! ✌🏻