grid: Apply mobile-style grid when middle column is small.

This introduces a new breakpoint. In the future, this kind of
round-about sizing will be made unncessary by container queries,
but while those ship in all modern browsers, their availability
is quite recent:

https://developer.mozilla.org/en-US/docs/Web/CSS/@container

web/src/css_variables.js

@@ -14,11 +14,15 @@ const ml = 425; // Mobile large
 const mm = 375; // Mobile medium
 const ms = 320; // Mobile small
 
+// Breakpoints for middle column
+const mc = 849; // Middle column as wide as it appears after the `sm` breakpoint
+
 module.exports = {
     media_breakpoints: {
         xs_min: xs + "px",
         sm_min: sm + "px",
         md_min: md + "px",
+        mc_min: mc + "px",
         lg_min: lg + "px",
         xl_min: xl + "px",
         ml_min: ml + "px",
@@ -30,6 +34,7 @@ module.exports = {
         xs,
         sm,
         md,
+        mc,
         lg,
         xl,
         ml,

web/styles/message_row.css

@@ -135,7 +135,7 @@ $time_column_min_width: 42px; /* + padding */
             ".      more      .        . .   "
             ".      reactions .        . .   ";
 
-        @media (width < $sm_min) {
+        @media (width < $sm_min), ((width >= $md_min) and (width < $mc_min)) {
             grid-template-columns: $avatar_column_width auto max-content 8px minmax(
                     $time_column_min_width,
                     max-content
@@ -147,7 +147,8 @@ $time_column_min_width: 42px; /* + padding */
             justify-self: end;
             padding: 0;
 
-            @media (width < $sm_min) {
+            @media (width < $sm_min),
+                ((width >= $md_min) and (width < $mc_min)) {
                 padding: 0 4px;
 
                 /* This is intended to target the first message_controls child