Page content shifts around when switching light/dark theme due to different font sizes

[jantari]

🐛 Bug Report

When switching between light and dark theme in by browsers devtools, using the default PasswordPusher theme, I noticed the page content was resizing / shifting up and down.

Looking into it I noticed it's because light and dark theme have different font-sizes configured:

light:

PasswordPusher/app/assets/stylesheets/themes/default.css

Line 61 in 8d2be08

--bs-body-font-size: 1.1rem;

dark:

PasswordPusher/app/assets/stylesheets/themes/default.css

Line 166 in 8d2be08

--bs-body-font-size: 1rem;

so basically switching to dark theme also, unexpectedly, made the site layout "more compact".

🔬 How To Reproduce

Steps to reproduce the behavior:

1. Run PasswordPusher with the default theme, no customizations
2. Open the passwordpusher page, e.g. at http://localhost:5100
3. Open your browsers devtools and repeatedly press the dark/light theme switcher button

Code sample

no code required for this issue

Environment

Where are you running/using Password Pusher?

• pwpush.com
• Docker Image
  • pwpush
  • custom image
• Heroku
• Digital Ocean
• Microsoft Azure
• Google Cloud
• AWS
• Source Code
• Other (please specify)

If applicable, what version of Password Pusher?

release tag, at the time of reporting this 1.36.5.

Screenshots

📈 Expected behavior

There should be no font size differences between light and dark theme.

📎 Additional context

A workaround I tested to fix this is to add a custom.css with the following contents:

@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-font-size: 1.1rem;
  }
}

Theme switcher button location in Firefox DevTools:

[github-actions]

Hello @jantari, thanks for contributing to the Password Pusher community! We will respond as soon as possible.

[jantari]

Because the fix for this is very simple I've opened a PR #1788

[pglombardo]

Excellent issue, fix & PR @jantari. Much appreciated. I'll merge and make a new release soon.

If you ever feel inclined, #1377 is another dark theme related bug.

[pglombardo]

This has been released in v1.36.7