From 14e9f653492bce0f408eca269d7d9670ac85fe5d Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 17 Aug 2023 11:12:56 -0500
Subject: [PATCH] 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   | 5 +++++
 web/styles/message_row.css | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/css_variables.js b/web/src/css_variables.js
index 7adee87dd1..d7da6f755e 100644
--- a/web/src/css_variables.js
+++ b/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,
diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index 4b430e2f44..db7e97475e 100644
--- a/web/styles/message_row.css
+++ b/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