message_grid: Let the avatar participate in CSS Grid.

This also ensures that sender info flexes and participates
in the grid's baseline group.

web/styles/message_row.css

@@ -222,11 +222,18 @@ $time_column_max_width: 150px;
     &.include-sender {
         .messagebox .messagebox-content {
             grid-template-areas:
-                "sender sender    controls time"
+                "avatar sender    controls time"
-                ".      message   .        .   "
+                "avatar message   .        .   "
                 ".      more      .        .   "
                 ".      reactions .        .   ";
 
+            .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;
+            }
+
             .message_content {
                 padding-top: 0;
                 grid-area: message;
@@ -267,6 +274,11 @@ $time_column_max_width: 150px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 grid-area: sender;
+                display: flex;
+                /* Ensure flexed sender info (name, status emoji, inline EDITED)
+                   forms a baseline group, which will participate with the
+                   message-box grid's baseline group, too. */
+                align-items: baseline;
 
                 .zulip-icon.zulip-icon-bot {
                     align-self: center;
@@ -313,18 +325,6 @@ $time_column_max_width: 150px;
                     }
                 }
 
-                > span {
-                    display: flex;
-                }
-
-                .inline_profile_picture {
-                    flex-shrink: 0;
-                    /* Let user profile picture take extra height without
-                       having any affect on height of the container. */
-                    position: absolute;
-                    margin-top: $distance_of_non_text_elements_from_message_box_top;
-                }
-
                 .sender_name {
                     margin-top: $sender_name_distance_below_flex_center;
                 }
@@ -340,17 +340,6 @@ $time_column_max_width: 150px;
                     line-height: normal;
                     outline: none;
                 }
-
-                .sender_name_padding {
-                    /* Add padding to align user name with the content. This region is
-                       important to ensure that the hover region for the sender name
-                       and avatar are continuous with each other. */
-                    padding-left: $avatar_column_width;
-                }
-
-                .sender_name-in-status .sender_name_padding {
-                    margin-left: -$avatar_column_width;
-                }
             }
 
             &.content_edit_mode {

web/templates/message_body.hbs

@@ -1,10 +1,10 @@
 {{#unless status_message}}
+{{#if include_sender}}
+    {{> message_avatar ~}}
+{{/if}}
 <span class="message_sender no-select">
     {{#if include_sender}}
-    <span>
-        {{> message_avatar ~}}
         <span class="sender_info_hover sender_name 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}}{{> status_emoji msg/status_emoji_info}}</span>
         </span>
         {{#if sender_is_bot}}
@@ -13,7 +13,6 @@
         {{#if edited_alongside_sender}}
         {{> edited_notice}}
         {{/if}}
-    </span>
     {{/if}}
 </span>
 {{/unless}}