Squishing and UI element overlapping on narrow screens

[choldgraf]

Description

On narrow screens with the book theme, some of the UI elements start to overlap or become squished. For example the site logo and the light/dark button. Here's a GIF as example:

which I was able to trigger by browsing this page from my phone:

https://2i2c.org/report-czi-2021/

Proposed solution

• CSS tweaks to make images retain their aspect ratio
• A way to either hide the right-side navbar items behind a drawer, or stack them more elegantly
• A way to make the logo text not clash as much with the right-hand UI elements

Additional notes