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 <anders@zulip.com>

Author: andersk

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",

postcss.config.js

@@ -11,6 +11,7 @@ module.exports = {
             variables: media_breakpoints,
         },
         "postcss-calc": {},
+        "postcss-media-minmax": {},
         autoprefixer: {},
     },
 };

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",
     },
 };

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) {

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%;

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. */

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;

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;
             }
 

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);

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;