Media query breakpoints conflict with Windows display scaling

[handymenny]

Bug Report

Current Behavior

If Windows display scaling isn't a multiple of 100% and the window width is 767px, neither the css rules with max-width: 767px nor those with min-width: 768px are applied. Resulting in a messed UI.

Steps to Reproduce

1. Go to Windows 10 Display Settings
2. Set display scaling to 125% or 150%
3. Open https://discuss.flarum.org/ with one of the affected browsers (firefox, edge chromium, chrome)
4. Open Responsive Design Mode (or the equivalent of the browser you are using)
5. Set width to 767px
6. Observe the completely messed up UI

Expected Behavior
At 767px flarum should switch to "phone view" without messing up UI

Screenshots

Firefox 89.0

Edge 91.0.864.41

Environment

• Flarum version: 1.0.2
• Website URL: https://discuss.flarum.org/
• Browsers: Chrome 91, Edge 91, Firefox 89
• OS: Windows 10 20H2
• Display Resolution: 1920px * 1080px
• Windows Display Scaling: 125%

Possible Solution
Apply Bootstrap workaround and substract by .02px instead of 1px in: https://github.com/flarum/core/blob/9077fef5b2448aef547f46bc7f78ee4856099757/less/common/variables.less#L122-L128