Styles: Fixed breakpoint overlap

ssddanbrown · ssddanbrown · commit 5c78f8352e82 · 2025-02-23T11:19:11.000Z
Alters common breakpoint utilities to not overlap at breakpoints which would cause broken layout at those points. For #5396
diff --git a/resources/js/components/tri-layout.js b/resources/js/components/tri-layout.js
@@ -27,7 +27,7 @@ export class TriLayout extends Component {
     updateLayout() {
         let newLayout = 'tablet';
         if (window.innerWidth <= 1000) newLayout = 'mobile';
-        if (window.innerWidth >= 1400) newLayout = 'desktop';
+        if (window.innerWidth > 1400) newLayout = 'desktop';
         if (newLayout === this.lastLayoutType) return;
 
         if (this.onDestroy) {
diff --git a/resources/sass/_mixins.scss b/resources/sass/_mixins.scss
@@ -3,10 +3,10 @@
     @media screen and (max-width: $size) { @content; }
 }
 @mixin larger-than($size) {
-    @media screen and (min-width: $size) { @content; }
+    @media screen and (min-width: ($size + 1)) { @content; }
 }
 @mixin between($min, $max) {
-  @media screen and (min-width: $min) and (max-width: $max) { @content; }
+  @media screen and (min-width: ($min + 1)) and (max-width: $max) { @content; }
 }
 
 // Padding shorthand using logical operators to better support RTL.

Original file line number	Diff line number	Diff line change
`@@ -3,10 +3,10 @@`
`3`	`3`	`@media screen and (max-width: $size) { @content; }`
`4`	`4`	`}`
`5`	`5`	`@mixin larger-than($size) {`
`6`		`- @media screen and (min-width: $size) { @content; }`
	`6`	`+ @media screen and (min-width: ($size + 1)) { @content; }`
`7`	`7`	`}`
`8`	`8`	`@mixin between($min, $max) {`
`9`		`- @media screen and (min-width: $min) and (max-width: $max) { @content; }`
	`9`	`+ @media screen and (min-width: ($min + 1)) and (max-width: $max) { @content; }`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`// Padding shorthand using logical operators to better support RTL.`