diff --git a/static/styles/message_row.css b/static/styles/message_row.css index 2be9e21e35..8bb6cd5c02 100644 --- a/static/styles/message_row.css +++ b/static/styles/message_row.css @@ -2,11 +2,12 @@ $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; +$time_column_min_width: 50px; /* + padding */ .message_row { .messagebox .messagebox-content { /* Total 868px - 1 56px 2 697px 3 55px 4 60px 5 + 1 56px 2 697px 3 55px 4 60px(min) 5 1 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾| | : TEXT : + ⋮ ☆ : 10:00 AM | | : TEXT : : | @@ -26,10 +27,10 @@ $sender_name_distance_below_flex_center: 3px; padding-left: 10px; grid-template-rows: repeat(4, auto); - grid-template-columns: $avatar_column_width auto 55px 60px; + grid-template-columns: $avatar_column_width auto 55px auto; @media (width < $sm_min) { - grid-template-columns: $avatar_column_width auto max-content 60px; + grid-template-columns: $avatar_column_width auto max-content auto; } .message_controls { @@ -64,6 +65,8 @@ $sender_name_distance_below_flex_center: 3px; line-height: 1; justify-self: end; padding-right: 10px; + min-width: $time_column_min_width; + text-align: end; grid-row-start: 1; grid-column-start: 4; position: relative;