message_grid: Share same message grid with me-messages.

web/e2e-tests/edit.test.ts

@@ -56,7 +56,7 @@ async function test_edit_message_with_slash_me(page: Page): Promise<void> {
     );
     await page.waitForSelector(
         `xpath/${last_message_xpath}//*[${common.has_class_x(
-            "sender_name-in-status",
+            "sender_name",
         )} and normalize-space()="Desdemona"]`,
     );
 
@@ -69,7 +69,7 @@ async function test_edit_message_with_slash_me(page: Page): Promise<void> {
     );
     await page.waitForSelector(
         `xpath/${last_message_xpath}//*[${common.has_class_x(
-            "sender_name-in-status",
+            "sender_name",
         )} and normalize-space()="Desdemona"]`,
     );
 }

web/styles/message_row.css

@@ -1,7 +1,7 @@
 $avatar_column_width: 46px;
 $distance_of_text_elements_from_message_box_top: 8.5px;
-$distance_of_non_text_elements_from_message_box_top: 6px;
+$distance_of_non_text_elements_from_message_box: 6px;
-$sender_name_distance_below_flex_center: 3px;
+$message_box_margin: 3px;
 
 /* The time column usually just needs enough space to display the
    timestamp. The minimum width here is enough for "22:22 PM", which
@@ -223,11 +223,53 @@ $time_column_max_width: 150px;
                 ".      more      .        .   "
                 ".      reactions .        .   ";
 
+            &.is-me-message {
+                grid-template-areas:
+                    "avatar sender    controls time"
+                    "avatar sender    .        .   "
+                    ".      more      .        .   "
+                    ".      reactions .        .   ";
+
+                .message_sender {
+                    /* Don't display message sender as flexbox for me-messages. */
+                    display: block;
+                    /* This preserves a consistent bottom spacing on the me-message
+                       grid, which ordinarily benefits from the margin of <p>
+                       elements in the markdown--which single-line me-messages do
+                       not receive.
+
+                       It also ensures a uniform space-relationship between the top: of the avatar and the top of the sender_name line.
+
+                       However, this should all arguably be handled from the grid
+                       container or the grid definition itself. */
+                    margin: $message_box_margin 0;
+
+                    /* Set the same line-height as on message content for
+                       me-messages. */
+                    line-height: var(--message-box-line-height);
+
+                    /* Display message components inline, with wrapping white-space,
+                       so the sender name and message display as a continuous line
+                       of wrapping text. */
+                    .sender_name {
+                        white-space: normal;
+                        display: inline;
+                    }
+                }
+            }
+
             .inline_profile_picture {
                 grid-area: avatar;
                 /* The picture should not participate in the baseline group. */
                 align-self: start;
-                margin-top: $distance_of_non_text_elements_from_message_box_top;
+                /* Because the avatar may be the tallest element in a
+                  single-line me message, this margin preserves the
+                  overall height of the message box. */
+                margin: $distance_of_non_text_elements_from_message_box 0;
+            }
+
+            .status-message {
+                font-weight: normal;
             }
 
             .message_content {
@@ -269,48 +311,11 @@ $time_column_max_width: 150px;
                    message-box grid's baseline group, too. */
                 align-items: baseline;
 
+                margin-top: $message_box_margin;
+
                 .zulip-icon.zulip-icon-bot {
                     align-self: center;
-                    padding: $sender_name_distance_below_flex_center 0 0 5px;
+                    padding: $message_box_margin 0 0 5px;
-                }
-
-                &.is_me_message {
-                    /*
-                1           2                                                                                                    3              4            5
-            1,2 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
-                |  ((((\\\  :                                                                                                    :              :            |
-                |   9_9 3)) : Sender Name is excited to write this multiline message that goes to the next line and takes the    :   +  ⋮  ☆    :  10:00 AM  |
-                |   \=  ((  : edit status with it to the next line. EDITED                                                       :              :            |
-              3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
-                |           :                                                                                                    :              :            |
-                |           :                                          [EXPAND / COLLAPSE]                                       :              :            |
-              4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
-                |           :                                                                                                    :              :            |
-                |           :                                          [Message Reactions]                                       :              :            |
-              5 |___________:____________________________________________________________________________________________________:______________:____________|
-                */
-                    min-height: $avatar_column_width;
-                    grid-row: 1 / 3;
-                    display: grid;
-                    grid-template-columns: $avatar_column_width auto;
-                    grid-template-rows: auto;
-
-                    & ~ .alert-msg,
-                    & ~ .message_time,
-                    & ~ .slow-send-spinner,
-                    & ~ .message_controls {
-                        grid-row: 1 / 3;
-                    }
-
-                    .sender-status {
-                        display: inline;
-                        margin: 0;
-                        margin-top: 13px;
-                    }
-                }
-
-                .sender_name {
-                    margin-top: $sender_name_distance_below_flex_center;
                 }
 
                 .sender_name,

web/styles/zulip.css

@@ -82,6 +82,11 @@ body {
     --left-sidebar-width: 270px;
     --right-sidebar-width: 250px;
 
+    /*
+    Message box line-height.
+    */
+    --message-box-line-height: 1.214;
+
     /*
     Left position of unread marker. Only needs to be tracked if it is negative so that
     it doesn't leak through message header.
@@ -1667,7 +1672,7 @@ div.focused_table {
 
 .message_content {
     color: var(--color-text-message-default);
-    line-height: 1.214;
+    line-height: var(--message-box-line-height);
     min-height: 17px;
     display: block;
     position: relative;

web/templates/me_message.hbs

@@ -1,23 +0,0 @@
-<span class="message_sender no-select is_me_message">
-    <span>
-        {{> message_avatar}}
-    </span>
-
-    <span class="sender-status">
-        <span class="sender_info_hover sender_name-in-status auto-select" role="button" tabindex="0">
-            <span class="sender_name_padding view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template"></span>
-            <span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">
-                {{msg/sender_full_name}}
-            </span>
-        </span>
-        {{#if sender_is_bot}}
-        <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
-        {{/if}}
-
-        <span class="rendered_markdown status-message auto-select">{{rendered_markdown status_message}}</span>
-
-        {{#if edited_status_msg}}
-        {{> edited_notice}}
-        {{/if}}
-    </span>
-</span>

web/templates/message_body.hbs

@@ -1,25 +1,30 @@
-{{#unless status_message}}
 {{#if include_sender}}
     {{> message_avatar ~}}
 {{/if}}
 <span class="message_sender no-select">
     {{#if include_sender}}
         <span class="sender_info_hover sender_name auto-select" role="button" tabindex="0">
-            <span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
+            <span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">
+                {{msg/sender_full_name}}
+                {{#unless status_message}}
+                {{> status_emoji msg/status_emoji_info}}
+                {{/unless}}
+            </span>
         </span>
         {{#if sender_is_bot}}
         <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
         {{/if}}
+        {{#if status_message}}
+            <span class="rendered_markdown status-message auto-select">{{rendered_markdown status_message}}</span>
+            {{#if edited_status_msg}}
+                {{> edited_notice}}
+            {{/if}}
+        {{/if}}
         {{#if edited_alongside_sender}}
             {{> edited_notice}}
         {{/if}}
     {{/if}}
 </span>
-{{/unless}}
-
-{{#if status_message}}
-{{> me_message}}
-{{/if}}
 
 <span class="alert-msg"></span>
 

web/templates/single_message.hbs

@@ -9,7 +9,7 @@
     {{/if}}
     <div class="unread_marker message_unread_marker"><div class="unread-marker-fill"></div></div>
     <div class="messagebox">
-        <div class="messagebox-content">
+        <div class="messagebox-content {{#if status_message}}is-me-message{{/if}}">
             {{> message_body}}
         </div>
     </div>