styles: Use range context queries to eliminate *_max variables.

On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: postcss/postcss-media-minmax#28 Signed-off-by: Anders Kaseorg <[email protected]>
andersk · Feb 4, 2021 · 9b3d07b · 9b3d07b
1 parent be22233
commit 9b3d07b
Show file tree

Hide file tree

Showing 28 changed files with 120 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "postcss-calc": "^8.0.0",
     "postcss-extend-rule": "^3.0.0",
     "postcss-loader": "^4.0.2",
+    "postcss-media-minmax": "https://github.com/andersk/postcss-media-minmax.git#01239f17f4a9872ace1dd133cee526a7de4ac9f5",
     "postcss-nested": "^5.0.0",
     "postcss-simple-vars": "^6.0.0",
     "regenerator-runtime": "^0.13.3",

diff --git a/postcss.config.js b/postcss.config.js
@@ -11,6 +11,7 @@ module.exports = {
             variables: media_breakpoints,
         },
         "postcss-calc": {},
+        "postcss-media-minmax": {},
         autoprefixer: {},
     },
 };
diff --git a/static/js/css_variables.js b/static/js/css_variables.js
@@ -22,14 +22,5 @@ module.exports = {
         ml_min: ml + "px",
         mm_min: mm + "px",
         ms_min: ms + "px",
-
-        xs_max: xs - 1 + "px",
-        sm_max: sm - 1 + "px",
-        md_max: md - 1 + "px",
-        lg_max: lg - 1 + "px",
-        xl_max: xl - 1 + "px",
-        ml_max: ml - 1 + "px",
-        mm_max: mm - 1 + "px",
-        ms_max: ms - 1 + "px",
     },
 };
diff --git a/static/js/message_viewport.js b/static/js/message_viewport.js
@@ -307,7 +307,7 @@ exports.is_narrow = function () {
     // This basically returns true when we hide the right sidebar for
     // the left_side_userlist skinny mode.  It would be nice to have a less brittle
     // test for this.
-    return window.innerWidth <= media_breakpoints.xl_max;
+    return window.innerWidth < media_breakpoints.xl_min;
 };
 
 exports.system_initiated_animate_scroll = function (scroll_amount) {

diff --git a/static/styles/alerts.css b/static/styles/alerts.css
@@ -240,7 +240,7 @@ $alert-error-red: hsl(0, 80%, 40%);
 }
 
 /* @media queries */
-@media (max-width: $lg_max) {
+@media (width < $lg_min) {
     .alert-box {
         width: 80%;
         left: 10%;

diff --git a/static/styles/app_components.css b/static/styles/app_components.css
@@ -268,7 +268,7 @@
     .stream_sorter_toggle {
         margin-left: auto;
 
-        @media (max-width: $lg_max) {
+        @media (width < $lg_min) {
             margin-left: unset;
         }
     }
@@ -390,7 +390,7 @@
     }
 }
 
-@media (max-width: $md_max) {
+@media (width < $md_min) {
     /* Override Bootstrap's responsive grid to display input at full width */
     .input-append .stream-list-filter {
         /* Input width = 100% - 10px margin x2 - 6px padding x2 - 1px border x2. */

diff --git a/static/styles/compose.css b/static/styles/compose.css
@@ -16,7 +16,7 @@
                 line-height: 1em;
             }
 
-            @media (min-width: $sm_min) {
+            @media (width >= $sm_min) {
                 display: none;
             }
         }
@@ -33,7 +33,7 @@
             display: none;
         }
 
-        @media (max-width: $sm_max) {
+        @media (width < $sm_min) {
             .compose_stream_button,
             .compose_private_button {
                 display: none;
@@ -497,20 +497,20 @@ a#undo_markdown_preview {
 }
 
 /* This max-width must be synced with message_viewport.is_narrow */
-@media (max-width: $xl_max) {
+@media (width < $xl_min) {
     .compose-content {
         margin-right: 7px;
     }
 }
 
-@media (max-width: $md_max) {
+@media (width < $md_min) {
     .compose-content {
         margin-right: 7px;
         margin-left: 7px;
     }
 }
 
-@media (max-width: $mm_max) {
+@media (width < $mm_min) {
     #stream_message_recipient_topic.recipient_box {
         width: calc(100% - 175px);
         min-width: 95px;

diff --git a/static/styles/drafts.css b/static/styles/drafts.css
@@ -11,7 +11,7 @@
     display: flex;
     flex-direction: column;
 
-    @media (max-width: $md_max) {
+    @media (width < $md_min) {
         height: 95%;
         max-width: none;
         width: 90%;
@@ -111,7 +111,7 @@
             right: -80px;
             font-size: 0.9em;
 
-            @media (max-width: $sm_max) {
+            @media (width < $sm_min) {
                 right: 0;
             }
 

diff --git a/static/styles/informational_overlays.css b/static/styles/informational_overlays.css
@@ -122,7 +122,7 @@
     margin-bottom: 10px !important;
 }
 
-@media only screen and (max-width: $md_max) {
+@media only screen and (width < $md_min) {
     .informational-overlays {
         .overlay-content {
             width: calc(100% - 20px);

diff --git a/static/styles/lightbox.css b/static/styles/lightbox.css
@@ -253,7 +253,7 @@
     }
 }
 
-@media only screen and (min-width: $ms_min) and (max-width: $md_max) {
+@media only screen and ($ms_min <= width < $md_min) {
     #lightbox_overlay {
         .image-actions {
             float: left;

diff --git a/static/styles/popovers.css b/static/styles/popovers.css
@@ -353,7 +353,7 @@ ul {
     }
 }
 
-@media (max-width: $md_max) {
+@media (width < $md_min) {
     .message-info-popover,
     .user-info-popover {
         display: flex !important;
@@ -402,7 +402,7 @@ ul {
             pointer-events: all;
         }
 
-        @media (max-width: $sm_max) {
+        @media (width < $sm_min) {
             .popover-inner {
                 width: 70%;
             }

diff --git a/static/styles/portico/archive.css b/static/styles/portico/archive.css
@@ -26,7 +26,7 @@ body {
     margin-top: 12px;
 }
 
-@media (max-width: 500px) {
+@media (width <= 500px) {
     .header {
         height: 40px;
         line-height: 10px;

diff --git a/static/styles/portico/integrations.css b/static/styles/portico/integrations.css
@@ -35,16 +35,16 @@ $category-text: hsl(219, 23%, 33%);
             border: none;
         }
 
-        @media (max-width: 768px) {
+        @media (width <= 768px) {
             width: auto;
         }
 
-        @media (max-width: 686px) {
+        @media (width <= 686px) {
             width: calc(100% - 50px);
             margin: 0 auto;
         }
 
-        @media (max-width: 450px) {
+        @media (width <= 450px) {
             width: 100%;
         }
     }
@@ -60,12 +60,12 @@ $category-text: hsl(219, 23%, 33%);
                 pointer-events: all;
             }
 
-            @media (max-width: 500px) {
+            @media (width <= 500px) {
                 height: auto;
             }
         }
 
-        @media (max-width: 450px) {
+        @media (width <= 450px) {
             padding: 40px 0;
         }
     }
@@ -141,12 +141,12 @@ $category-text: hsl(219, 23%, 33%);
                         border: 1px solid $border-green;
                     }
 
-                    @media (max-width: 768px) {
+                    @media (width <= 768px) {
                         width: 375px;
                         margin: 0 auto;
                     }
 
-                    @media (max-width: 550px) {
+                    @media (width <= 550px) {
                         width: calc(100% - 80px);
                     }
                 }
@@ -159,11 +159,11 @@ $category-text: hsl(219, 23%, 33%);
                     color: $border-green;
                 }
 
-                @media (max-width: 768px) {
+                @media (width <= 768px) {
                     width: 445px;
                 }
 
-                @media (max-width: 550px) {
+                @media (width <= 550px) {
                     width: 100%;
                 }
             }
@@ -212,7 +212,7 @@ $category-text: hsl(219, 23%, 33%);
                 }
             }
 
-            @media (max-width: 906px) {
+            @media (width <= 906px) {
                 display: none;
             }
         }
@@ -226,7 +226,7 @@ $category-text: hsl(219, 23%, 33%);
             font-weight: 600;
         }
 
-        @media (max-width: 906px) {
+        @media (width <= 906px) {
             display: block;
             width: 670px;
 
@@ -282,27 +282,27 @@ $category-text: hsl(219, 23%, 33%);
             }
         }
 
-        @media (max-width: 830px) {
+        @media (width <= 830px) {
             width: 666px;
         }
 
-        @media (max-width: 786px) {
+        @media (width <= 786px) {
             width: 509px;
         }
 
-        @media (max-width: 768px) {
+        @media (width <= 768px) {
             width: 666px;
         }
 
-        @media (max-width: 686px) {
+        @media (width <= 686px) {
             width: 509px;
         }
 
-        @media (max-width: 578px) {
+        @media (width <= 578px) {
             width: 351px;
         }
 
-        @media (max-width: 357px) {
+        @media (width <= 357px) {
             width: 299px;
         }
     }
@@ -311,7 +311,7 @@ $category-text: hsl(219, 23%, 33%);
         overflow: hidden;
         text-align: left;
 
-        @media (max-width: 906px) {
+        @media (width <= 906px) {
             text-align: center;
         }
     }
@@ -380,7 +380,7 @@ $category-text: hsl(219, 23%, 33%);
             }
         }
 
-        @media (max-width: 830px) {
+        @media (width <= 830px) {
             width: 134px;
             height: 180px;
 
@@ -406,11 +406,11 @@ $category-text: hsl(219, 23%, 33%);
             }
         }
 
-        @media (max-width: 375px) {
+        @media (width <= 375px) {
             width: 120px;
         }
 
-        @media (max-width: 357px) {
+        @media (width <= 357px) {
             width: 108px;
             height: 160px;
 
@@ -452,7 +452,7 @@ $category-text: hsl(219, 23%, 33%);
                     display: none;
                 }
 
-                @media (max-width: 768px) {
+                @media (width <= 768px) {
                     border: none;
 
                     display: flex !important;
@@ -510,21 +510,21 @@ $category-text: hsl(219, 23%, 33%);
                     display: inline-block;
                     margin-left: 5px;
 
-                    @media (min-width: 768px) {
+                    @media (width >= 768px) {
                         margin-top: 15px;
                     }
 
-                    @media (max-width: 768px) {
+                    @media (width <= 768px) {
                         display: none;
                     }
                 }
 
-                @media (max-width: 768px) {
+                @media (width <= 768px) {
                     font-size: 22px;
                 }
             }
 
-            @media (max-width: 768px) {
+            @media (width <= 768px) {
                 flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
@@ -533,7 +533,7 @@ $category-text: hsl(219, 23%, 33%);
                 border-bottom: 1px solid $light-blue-border;
             }
 
-            @media (max-width: 768px) {
+            @media (width <= 768px) {
                 .name {
                     display: block;
                 }
@@ -549,20 +549,20 @@ $category-text: hsl(219, 23%, 33%);
                 margin: 20px 0;
             }
 
-            @media (min-width: 768px) {
+            @media (width >= 768px) {
                 width: calc(100% - 200px);
             }
 
-            @media (max-width: 768px) {
+            @media (width <= 768px) {
                 margin-left: 0;
             }
         }
 
-        @media (max-width: 768px) {
+        @media (width <= 768px) {
             flex-direction: column;
         }
 
-        @media (max-width: 450px) {
+        @media (width <= 450px) {
             padding: 0 25px;
         }
     }