message_row: Introduce CSS variable for avatar column width.

pengjinning · Apr 22, 2024 · 31865db · 31865db
1 parent 085abf9
commit 31865db
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
@@ -71,6 +71,7 @@
     */
     --message-box-avatar-width: 35px;
     --message-box-avatar-height: var(--message-box-avatar-width);
+    --message-box-avatar-column-width: 46px;
     --message-box-line-height: 1.214;
     --message-box-icon-width: 26px;
     --message-box-icon-height: 25px;

diff --git a/web/styles/message_row.css b/web/styles/message_row.css
@@ -1,4 +1,3 @@
-$avatar_column_width: 46px;
 $distance_of_non_text_elements_from_message_box: 6px;
 $message_box_margin: 3px;
 
@@ -139,7 +138,7 @@ $message_box_margin: 3px;
             in the column. */
         grid-template:
             var(--message-box-icon-height) repeat(3, auto) /
-            $avatar_column_width minmax(0, 1fr) calc(
+            var(--message-box-avatar-column-width) minmax(0, 1fr) calc(
                 3 * var(--message-box-icon-width)
             )
             8px minmax(var(--message-box-timestamp-column-width), max-content);
@@ -155,15 +154,17 @@ $message_box_margin: 3px;
             cursor: default;
             /* Set the controls area to 0 to give more space
                to the edit/source view area. */
-            grid-template-columns: $avatar_column_width minmax(0, 1fr) 0 8px minmax(
+            grid-template-columns:
+                var(--message-box-avatar-column-width) minmax(0, 1fr)
+                0 8px minmax(
                     var(--message-box-timestamp-column-width),
                     max-content
                 );
         }
 
         @media (width < $sm_min), ((width >= $md_min) and (width < $mc_min)) {
             grid-template-columns:
-                $avatar_column_width minmax(0, 1fr) calc(
+                var(--message-box-avatar-column-width) minmax(0, 1fr) calc(
                     2 * var(--message-box-icon-width)
                 )
                 8px minmax(