paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 23:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

me_messages: Improve grid for me-message alignment.

Browse Source
This commit is contained in:
Karl Stolley
2025-01-22 15:11:34 -06:00
committed by Tim Abbott
parent 1878758baf
commit eda9b1a271
1 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/styles/message_row.css
View File

@@ -257,10 +257,16 @@
&.is-me-message { &.is-me-message {
grid-template-areas: grid-template-areas:
". . . . . "
"avatar sender controls . time" "avatar sender controls . time"
"avatar sender . . . " "avatar sender . . . "
". more . . . " ". more . . . "
". reactions . . . "; ". reactions . . . ";
grid-template-rows:
var(--message-box-vertical-margin) var(
--message-box-avatar-height
)
minmax(0, auto) repeat(3, auto);
.message-avatar { .message-avatar {
/* Set the line-height to match the height of the avatar image /* Set the line-height to match the height of the avatar image
@@ -271,6 +277,19 @@
single-line me message, this margin preserves the single-line me message, this margin preserves the
overall height of the message box. */ overall height of the message box. */
margin-bottom: var(--message-box-vertical-margin); margin-bottom: var(--message-box-vertical-margin);
.inline_profile_picture {
/* We adjust the vertical space in me messages via
the grid definition above. */
margin-top: 0;
}
}
.message_controls {
/* Because the controls height is smaller than the
available grid row height on me-messages, we
align to center here. */
align-self: center;
} }
.message_sender { .message_sender {