chore: fix off-by-one min-width: 1023px media queries (#15974)

eslint · Aug 26, 2022 · deaf69f · deaf69f
1 parent 63dec9f
commit deaf69f
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 19 deletions.
diff --git a/docs/src/assets/scss/components/docs-index.scss b/docs/src/assets/scss/components/docs-index.scss
@@ -76,15 +76,15 @@
     &[data-open="false"] {
         display: none;
 
-        @media all and (min-width: 1023px) {
+        @media all and (min-width: 1024px) {
             display: block;
         }
     }
 
     &[data-open="true"] {
         display: block;
 
-        @media all and (min-width: 1023px) {
+        @media all and (min-width: 1024px) {
             display: block;
         }
     }
@@ -109,7 +109,7 @@
         background-color: var(--secondary-button-hover-color);
     }
 
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         display: none;
     }
 

diff --git a/docs/src/assets/scss/components/docs-navigation.scss b/docs/src/assets/scss/components/docs-navigation.scss
@@ -14,7 +14,7 @@
         margin-block-end: 2rem;
 
 
-        @media all and (min-width: 1023px) {
+        @media all and (min-width: 1024px) {
             font-size: var(--step-0);
             margin-top: 0;
             margin-block-start: 0;
@@ -52,7 +52,7 @@
 
 
 .docs-nav-panel {
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         display: flex;
         flex-direction: row;
         justify-content: center;
@@ -63,7 +63,7 @@
     }
 
     &[data-open="true"] {
-        @media all and (min-width: 1023px) {
+        @media all and (min-width: 1024px) {
             display: flex;
             flex-direction: row;
             justify-content: center;
@@ -72,7 +72,7 @@
 }
 
 .docs-nav-panel .mobile-only {
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         display: none;
     }
 }
@@ -130,7 +130,7 @@
 
 
 
-@media all and (min-width: 1023px) {
+@media all and (min-width: 1024px) {
     .docs-site-nav {
         flex-direction: row;
         grid-column: auto;

diff --git a/docs/src/assets/scss/components/index.scss b/docs/src/assets/scss/components/index.scss
@@ -45,7 +45,7 @@
         background-color: var(--secondary-button-hover-color);
     }
 
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         display: none;
     }
 
@@ -95,15 +95,15 @@
     &[data-open="false"] {
         display: none;
 
-        @media all and (min-width: 1023px) {
+        @media all and (min-width: 1024px) {
             display: block;
         }
     }
 
     &[data-open="true"] {
         display: block;
 
-        @media all and (min-width: 1023px) {
+        @media all and (min-width: 1024px) {
             display: block;
         }
     }

diff --git a/docs/src/assets/scss/components/search.scss b/docs/src/assets/scss/components/search.scss
@@ -75,7 +75,7 @@
     max-height: 400px;
     overflow-y: auto;
 
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         box-shadow: var(--shadow-lg);
         position: absolute;
         top: calc(100% + .25rem);

diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
@@ -19,7 +19,7 @@ html {
     display: flex;
     flex-direction: column;
 
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         display: grid;
         grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
         align-items: stretch;
@@ -37,7 +37,7 @@ html {
     grid-auto-rows: max-content;
     align-items: start;
 
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         padding: var(--space-l-xl) 0;
         padding-right: var(--space-s-l);
         padding-inline-end: var(--space-s-l);
@@ -58,7 +58,7 @@ html {
         grid-gap: 1rem;
     }
 
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         padding: 0;
     }
 
@@ -78,7 +78,7 @@ html {
         border-inline-end: 1px solid var(--divider-color);
     }
 
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         padding: var(--space-l-xl) var(--space-l-2xl);
     }
 }

diff --git a/docs/src/assets/scss/tokens/spacing.scss b/docs/src/assets/scss/tokens/spacing.scss
@@ -8,7 +8,7 @@
     --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
 }
 
-@media screen and (min-width: 1023px) {
+@media screen and (min-width: 1024px) {
     :root {
         --fluid-screen: calc(var(--fluid-max-width) * 1px);
     }

diff --git a/docs/src/assets/scss/utilities.scss b/docs/src/assets/scss/utilities.scss
@@ -1,5 +1,5 @@
 .grid {
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         display: grid;
         grid-template-columns: repeat(12, 1fr);
         grid-gap: 2rem;
@@ -23,7 +23,7 @@
 }
 
 .mobile-only {
-    @media all and (min-width: 1023px) {
+    @media all and (min-width: 1024px) {
         display: none;
     }
 }