Support fractional viewport sizes for max-width media queries (#1827)

* Support fractional viewport sizes * Create serious-emus-worry.md * Support fractional viewport sizes for Popover * Support fractional viewport sizes for Layout * Create afraid-jars-occur.md
primer · Dec 15, 2021 · 69e1fc5 · 69e1fc5
1 parent 8ee1f01
commit 69e1fc5
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/.changeset/afraid-jars-occur.md b/.changeset/afraid-jars-occur.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Support fractional viewport sizes for `max-width` media queries
diff --git a/.changeset/serious-emus-worry.md b/.changeset/serious-emus-worry.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Support fractional viewport sizes for the `hide` utilities
diff --git a/src/layout/layout.scss b/src/layout/layout.scss
@@ -6,18 +6,18 @@
   --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
   --Layout-gutter: 16px;
 
-  @media (max-width: calc(#{$width-sm} - 1px)) {
+  @media (max-width: calc(#{$width-sm} - 0.02px)) {
     @include flow-as-row;
   }
 
   &.Layout--flowRow-until-md {
-    @media (max-width: calc(#{$width-md} - 1px)) {
+    @media (max-width: calc(#{$width-md} - 0.02px)) {
       @include flow-as-row;
     }
   }
 
   &.Layout--flowRow-until-lg {
-    @media (max-width: calc(#{$width-lg} - 1px)) {
+    @media (max-width: calc(#{$width-lg} - 0.02px)) {
       @include flow-as-row;
     }
   }

diff --git a/src/popover/popover.scss b/src/popover/popover.scss
@@ -196,7 +196,7 @@
 // Responsive Popover
 // For < md it will show full-width anchored to the bottom
 
-@media (max-width: ($width-md - 1px)) {
+@media (max-width: ($width-md - 0.02px)) {
   .Popover {
     position: fixed;
     top: auto !important;

diff --git a/src/utilities/visibility-display.scss b/src/utilities/visibility-display.scss
@@ -14,19 +14,19 @@
 
 // Hide utilities for each breakpoint
 // Each hide utility only applies to one breakpoint range.
-@media (max-width: $width-sm - 1px) {
+@media (max-width: $width-sm - 0.02px) {
   .hide-sm {
     display: none !important;
   }
 }
 
-@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
+@media (min-width: $width-sm) and (max-width: $width-md - 0.02px) {
   .hide-md {
     display: none !important;
   }
 }
 
-@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
+@media (min-width: $width-md) and (max-width: $width-lg - 0.02px) {
   .hide-lg {
     display: none !important;
   }