From 5c78f8352e82231aaef70e2b3be47360d840ca47 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 23 Feb 2025 11:19:11 +0000
Subject: [PATCH] Styles: Fixed breakpoint overlap
Alters common breakpoint utilities to not overlap at breakpoints which
would cause broken layout at those points.
For #5396
---
resources/js/components/tri-layout.js | 2 +-
resources/sass/_mixins.scss | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/resources/js/components/tri-layout.js b/resources/js/components/tri-layout.js
index 8ccefb06c..be9388e8d 100644
--- 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
index 0a419c08a..fc5086008 100644
--- 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.