From ddaebb3255e464d266195cf8ad1bd6bc84d43fbd Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Mon, 10 Jul 2023 09:45:41 -0500
Subject: [PATCH] message_grid: Use a 'dead' column to space controls and time.

This commit adds a 3px column between the `controls` and `time`
areas, which keeps the controls from crowding the time for
languages with longer time markers.

To make the layout easier to reason about, this includes the
minimum width for the time column as part of the message-box
grid definition.
---
 web/styles/message_row.css | 43 +++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index cc54ebb37c..816c7ceed7 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -10,12 +10,10 @@ $message_box_margin: 3px;
 
    But in some locales, the time encoding is wider, (especially where
    the "PM" abbreviation is longer), so we allow the column to be
-   wider for individual messages if required, to prevent ugly
-   line-wrapping. In practice, it's unlikely we'll see anything wider
-   than 60px; so the precise value of $time_column_max_width should be
-   unimportant. */
+   wider for individual messages if required, up to `max-content`, to
+   prevent ugly line-wrapping. In practice, it's unlikely we'll see
+   anything wider than 60px. */
 $time_column_min_width: 50px; /* + padding */
-$time_column_max_width: 150px;
 
 .message_row {
     display: grid;
@@ -126,18 +124,22 @@ $time_column_max_width: 150px;
         padding-left: 10px;
         grid-template:
             25px repeat(3, auto) /
-            $avatar_column_width auto 55px fit-content($time_column_max_width);
+            $avatar_column_width auto 55px 3px minmax(
+                $time_column_min_width,
+                max-content
+            );
         /* Named grid areas provide flexibility for positioning grid items
            reliably, even if the row or column definitions of the grid change. */
         grid-template-areas:
-            "edited message   controls time"
-            ".      message   .        .   "
-            ".      more      .        .   "
-            ".      reactions .        .   ";
+            "edited message   controls . time"
+            ".      message   .        . .   "
+            ".      more      .        . .   "
+            ".      reactions .        . .   ";
 
         @media (width < $sm_min) {
-            grid-template-columns: $avatar_column_width auto max-content fit-content(
-                    $time_column_max_width
+            grid-template-columns: $avatar_column_width auto max-content 3px minmax(
+                    $time_column_min_width,
+                    max-content
                 );
         }
 
@@ -164,7 +166,6 @@ $time_column_max_width: 150px;
         .message_time {
             justify-self: end;
             padding-right: 5px;
-            min-width: $time_column_min_width;
             text-align: end;
             grid-area: time;
 
@@ -223,10 +224,10 @@ $time_column_max_width: 150px;
     &.include-sender {
         .messagebox .messagebox-content {
             grid-template-areas:
-                "avatar sender    controls time"
-                "avatar message   .        .   "
-                ".      more      .        .   "
-                ".      reactions .        .   ";
+                "avatar sender    controls . time"
+                "avatar message   .        . .   "
+                ".      more      .        . .   "
+                ".      reactions .        . .   ";
 
             .message_edit {
                 /* No top margin when there's a sender row */
@@ -235,10 +236,10 @@ $time_column_max_width: 150px;
 
             &.is-me-message {
                 grid-template-areas:
-                    "avatar sender    controls time"
-                    "avatar sender    .        .   "
-                    ".      more      .        .   "
-                    ".      reactions .        .   ";
+                    "avatar sender    controls . time"
+                    "avatar sender    .        . .   "
+                    ".      more      .        . .   "
+                    ".      reactions .        . .   ";
 
                 .message_sender {
                     /* Don't display message sender as flexbox for me-messages. */