zulip/web/styles/message_row.css

$avatar_column_width: 46px;
$distance_of_text_elements_from_message_box_top: 8.5px;
$distance_of_non_text_elements_from_message_box_top: 6px;
$sender_name_distance_below_flex_center: 3px;

/* The time column usually just needs enough space to display the
   timestamp. The minimum width here is enough for "22:22 PM", which
   is roughly the widest this will be in English; this is nice as the
   timestamps and message controls will be vertically aligned.

   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. */
$time_column_min_width: 50px; /* + padding */
$time_column_max_width: 150px;

.message_row {
    .messagebox .messagebox-content {
        /* Total 868px
        1    56px   2                                        697px                                                      3     55px     4  60px(min)  5
      1 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
        |           :   TEXT                                                                                             :   +  ⋮  ☆    :  10:00 AM  |
        |           :   TEXT                                                                                             :              :            |
        |   EDITED  :   TEXT                                                                                             :              :            |
        |           :   TEXT                                                                                             :              :            |
        |           :   TEXT                                                                                             :              :            |
    2,3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
        |           :                                                                                                    :              :            |
        |           :                                          [EXPAND / COLLAPSE]                                       :              :            |
      4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
        |           :                                                                                                    :              :            |
        |           :                                          [Message Reactions]                                       :              :            |
      5 |___________:____________________________________________________________________________________________________:______________:____________|
        */
        display: grid;
        align-items: start;
        padding-left: 10px;
        grid-template-rows: repeat(4, auto);

        grid-template-columns: $avatar_column_width auto 55px fit-content(
                $time_column_max_width
            );

        @media (width < $sm_min) {
            grid-template-columns: $avatar_column_width auto max-content fit-content(
                    $time_column_max_width
                );
        }

        .message_controls {
            grid-row-start: 1;
            grid-column-start: 3;
            line-height: 1;
            justify-self: end;
            /* We need to position it from top and not vertically centered since we want it
               to have the same position from top when user is editing the message. */
            position: relative;
            top: $distance_of_non_text_elements_from_message_box_top;
            padding: 0;

            @media (width < $sm_min) {
                padding: 0 4px;

                /* This is intended to target the first message_controls child
                   when there are 3 displayed. 4 = 3 + hidden message_failed element. */
                .message_control_button:nth-last-child(4) {
                    display: none;
                }
            }
        }

        .message_edit_notice {
            grid-row-start: 1;
            position: relative;
            top: $distance_of_text_elements_from_message_box_top;
        }

        .message_time {
            line-height: 1;
            justify-self: end;
            padding-right: 5px;
            min-width: $time_column_min_width;
            text-align: end;
            grid-row-start: 1;
            grid-column-start: 4;
            position: relative;
            top: $distance_of_text_elements_from_message_box_top;

            &.notvisible {
                /* This happens when message failed to send. We don't want to
                   display time but still want it to occupy space. */
                width: 45px !important;
                position: unset !important;
            }
        }

        .slow-send-spinner {
            display: none;
            justify-self: end;
            margin-right: 10px;
            text-align: end;
            grid-row-start: 1;
            grid-column-start: 4;
            position: relative;
            top: $distance_of_text_elements_from_message_box_top;
        }

        .message_content {
            grid-row-start: 1;
            grid-column-start: 2;
            padding: 4px 0 1px;
        }

        .message_reactions {
            grid-row-start: 4;
            grid-column-start: 2;
        }

        .message_edit {
            grid-row-start: 2;
            grid-column-start: 2;
        }

        .alert-msg {
            grid-row-start: 1;
            grid-column: 3 / 5;
            margin-top: 4px;
        }

        .message_length_controller {
            grid-row-start: 3;
            grid-column-start: 2;
        }
    }

    &.include-sender {
        /*
        1           2                                                                                                    3              4            5
      1 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
        |  ((((\\\  : Sender Name  EDITED                                                                                :   +  ⋮  ☆    :  10:00 AM  |
      2 |   9_9 3)) :_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
        |   \=  ((  :   TEXT                                                                                             :              :            |
        |           :   TEXT                                                                                             :              :            |
        |           :   TEXT                                                                                             :              :            |
        |           :   TEXT                                                                                             :              :            |
        |           :   TEXT                                                                                             :              :            |
      3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
        |           :                                                                                                    :              :            |
        |           :                                          [EXPAND / COLLAPSE]                                       :              :            |
      4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
        |           :                                                                                                    :              :            |
        |           :                                          [Message Reactions]                                       :              :            |
      5 |___________:____________________________________________________________________________________________________:______________:____________|
        */
        .messagebox .messagebox-content {
            grid-template-rows: 25px repeat(3, auto);

            .message_content {
                padding-top: 0;
                grid-row-start: 2;
            }

            .message_time {
                align-self: center;
                position: unset;
                margin-top: 1px;
            }

            .slow-send-spinner {
                align-self: center;
                position: unset;
                margin-top: 1px;
            }

            .message_edit_notice {
                align-self: center;
                top: 2px;
            }

            .message_controls {
                align-self: center;
                position: unset;
            }

            .message_sender {
                overflow: hidden;
                text-overflow: ellipsis;
                grid-column: 1 / 3;
                grid-row: 1 / 2;

                .zulip-icon.zulip-icon-bot {
                    align-self: center;
                    padding: $sender_name_distance_below_flex_center 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;

                        .message_edit_notice {
                            position: relative;
                            top: -1px;
                        }
                    }
                }

                > 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;
                }

                .sender_name,
                .sender_name-in-status {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    /* It is important to use line-height `normal` here since user's name can
                       be in any language and `line-height: 1` doesn't work to accommodate text
                       from start and end vertically in all languages. */
                    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 {
                .is_me_message {
                    & ~ .alert-msg,
                    & ~ .message_time,
                    & ~ .message_controls {
                        grid-row: 1 / 2;
                    }
                }
            }
        }
    }

    /* Locally echoed messages. */
    &.locally-echoed .message_time {
        opacity: 0;
        /* Don't show pointer when message_time doesn't has a link. */
        cursor: default;
    }

    /* Show the spinner only for messages that are still locally echoed. */
    &.locally-echoed .slow-send-spinner {
        display: unset !important;
        cursor: default;
    }
}