From a1b5ef5154a14637ec6169970bb23fe6d77e9439 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Fri, 29 Oct 2021 19:57:53 +0200
Subject: [PATCH] fix: issue with CSS styles when in-between whole pixel values
 for viewport width (#3139)

* fix: issue with CSS styles when in-between whole pixel values for viewport width

Fixes #2915

* chore: add explanatory comment

* fix: add missing slash
---
 less/common/variables.less | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/less/common/variables.less b/less/common/variables.less
index e63ea0dd5..b82f33347 100644
--- a/less/common/variables.less
+++ b/less/common/variables.less
@@ -119,13 +119,17 @@
 // ---------------------------------
 // BREAKPOINTS
 
-@screen-phone-max:                 (@screen-tablet - 1);
+// We use `-0.02` here to fix an odd rendering glitch with specific operating system UI scaling, and combined
+// with specific viewport sizes. This can result in the browser actually being 'between' media queries, which
+// breaks our UI. See: https://github.com/flarum/core/issues/2915
+
+@screen-phone-max:                 (@screen-tablet - 0.02);
 
 @screen-tablet:                    768px;
-@screen-tablet-max:                (@screen-desktop - 1);
+@screen-tablet-max:                (@screen-desktop - 0.02);
 
 @screen-desktop:                   992px;
-@screen-desktop-max:               (@screen-desktop-hd - 1);
+@screen-desktop-max:               (@screen-desktop-hd - 0.02);
 
 @screen-desktop-hd:                1100px;