CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-07-06 21:18:58 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

message_row: Refine grid for better-fitting action icons.

Browse Source
This commit is contained in:
Karl Stolley 2025-02-12 15:46:45 -05:00 committed by Tim Abbott
parent e285711abf
commit e352ab628c
1 changed files with 4 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/styles/message_row.css
View File

@ -104,9 +104,7 @@
in the column. */
grid-template:
var(--message-box-sender-line-height) repeat(3, auto) /
var(--message-box-avatar-column-width) minmax(0, 1fr) calc(
3 * var(--message-box-icon-width)
)
var(--message-box-avatar-column-width) minmax(0, 1fr) max-content
8px minmax(var(--message-box-timestamp-column-width), max-content);
/* Named grid areas provide flexibility for positioning grid items
reliably, even if the row or column definitions of the grid change. */
@ -128,14 +126,6 @@
);
}
@media (width < $sm_min), ((width >= $md_min) and (width < $mc_min)) {
grid-template-columns:
var(--message-box-avatar-column-width) minmax(0, 1fr) calc(
2 * var(--message-box-icon-width)
)
8px minmax(var(--message-box-timestamp-column-width), max-content);
}
.message_edit_notice {
grid-area: edited;
}
@ -542,10 +532,10 @@
.edit_content {
/* Icons for editing content are determined on message hover;
we set an empty `.edit_content` to have 0 height in order to
preserve the layout of the other icons prior to any hovering. */
we set an empty `.edit_content` to take the eventual width
of whatever icon is displayed, so as to avoid a grid shift. */
&:empty {
height: 0;
width: var(--message-box-icon-width);
}
&:hover {