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

mdjermanovic · web-flow · commit deaf69ffd8f9 · 2022-08-26T09:51:29.000-07:00
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;
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -76,15 +76,15 @@`
`76`	`76`	`&[data-open="false"] {`
`77`	`77`	`display: none;`
`78`	`78`
`79`		`- @media all and (min-width: 1023px) {`
	`79`	`+ @media all and (min-width: 1024px) {`
`80`	`80`	`display: block;`
`81`	`81`	`}`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`&[data-open="true"] {`
`85`	`85`	`display: block;`
`86`	`86`
`87`		`- @media all and (min-width: 1023px) {`
	`87`	`+ @media all and (min-width: 1024px) {`
`88`	`88`	`display: block;`
`89`	`89`	`}`
`90`	`90`	`}`
`@@ -109,7 +109,7 @@`
`109`	`109`	`background-color: var(--secondary-button-hover-color);`
`110`	`110`	`}`
`111`	`111`
`112`		`- @media all and (min-width: 1023px) {`
	`112`	`+ @media all and (min-width: 1024px) {`
`113`	`113`	`display: none;`
`114`	`114`	`}`
`115`	`115`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@`
`45`	`45`	`background-color: var(--secondary-button-hover-color);`
`46`	`46`	`}`
`47`	`47`
`48`		`- @media all and (min-width: 1023px) {`
	`48`	`+ @media all and (min-width: 1024px) {`
`49`	`49`	`display: none;`
`50`	`50`	`}`
`51`	`51`
`@@ -95,15 +95,15 @@`
`95`	`95`	`&[data-open="false"] {`
`96`	`96`	`display: none;`
`97`	`97`
`98`		`- @media all and (min-width: 1023px) {`
	`98`	`+ @media all and (min-width: 1024px) {`
`99`	`99`	`display: block;`
`100`	`100`	`}`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`&[data-open="true"] {`
`104`	`104`	`display: block;`
`105`	`105`
`106`		`- @media all and (min-width: 1023px) {`
	`106`	`+ @media all and (min-width: 1024px) {`
`107`	`107`	`display: block;`
`108`	`108`	`}`
`109`	`109`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ html {`
`19`	`19`	`display: flex;`
`20`	`20`	`flex-direction: column;`
`21`	`21`
`22`		`- @media all and (min-width: 1023px) {`
	`22`	`+ @media all and (min-width: 1024px) {`
`23`	`23`	`display: grid;`
`24`	`24`	`grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);`
`25`	`25`	`align-items: stretch;`
`@@ -37,7 +37,7 @@ html {`
`37`	`37`	`grid-auto-rows: max-content;`
`38`	`38`	`align-items: start;`
`39`	`39`
`40`		`- @media all and (min-width: 1023px) {`
	`40`	`+ @media all and (min-width: 1024px) {`
`41`	`41`	`padding: var(--space-l-xl) 0;`
`42`	`42`	`padding-right: var(--space-s-l);`
`43`	`43`	`padding-inline-end: var(--space-s-l);`
`@@ -58,7 +58,7 @@ html {`
`58`	`58`	`grid-gap: 1rem;`
`59`	`59`	`}`
`60`	`60`
`61`		`- @media all and (min-width: 1023px) {`
	`61`	`+ @media all and (min-width: 1024px) {`
`62`	`62`	`padding: 0;`
`63`	`63`	`}`
`64`	`64`
`@@ -78,7 +78,7 @@ html {`
`78`	`78`	`border-inline-end: 1px solid var(--divider-color);`
`79`	`79`	`}`
`80`	`80`
`81`		`- @media all and (min-width: 1023px) {`
	`81`	`+ @media all and (min-width: 1024px) {`
`82`	`82`	`padding: var(--space-l-xl) var(--space-l-2xl);`
`83`	`83`	`}`
`84`	`84`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`--fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));`
`9`	`9`	`}`
`10`	`10`
`11`		`-@media screen and (min-width: 1023px) {`
	`11`	`+@media screen and (min-width: 1024px) {`
`12`	`12`	`:root {`
`13`	`13`	`--fluid-screen: calc(var(--fluid-max-width) * 1px);`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.grid {`
`2`		`- @media all and (min-width: 1023px) {`
	`2`	`+ @media all and (min-width: 1024px) {`
`3`	`3`	`display: grid;`
`4`	`4`	`grid-template-columns: repeat(12, 1fr);`
`5`	`5`	`grid-gap: 2rem;`
`@@ -23,7 +23,7 @@`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.mobile-only {`
`26`		`- @media all and (min-width: 1023px) {`
	`26`	`+ @media all and (min-width: 1024px) {`
`27`	`27`	`display: none;`
`28`	`28`	`}`
`29`	`29`	`}`