Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css_grid: Defensively prevent blowouts by using minmax(). 

This improves upon a change introduced in #26279. But rather than
setting an `overflow` value, this uses `minmax()` with a 0 minimum
value--pushing back against the default grid minimum column value
of `auto`. The `auto` value will always try to fit the content
into the grid, even if that means wreaking havoc on the grid as
defined.
This commit is contained in:
Karl Stolley 2023-07-20 12:57:31 -05:00 committed by Tim Abbott
parent f8636e7d2b
commit a1a8afa2f7
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/styles/message_row.css
View File

@ -17,7 +17,11 @@ $time_column_min_width: 42px; /* + padding */
.message_row { .message_row {
display: grid; display: grid;
grid-template: auto auto / 2px 1fr; /* Prevent the messagebox column from overflowing the 1fr
space allotted by specifying `minmax(0,1fr)`, which
sets 0 as the minimum size, not the grid default of
`auto`. */
grid-template: auto auto / 2px minmax(0, 1fr);
grid-template-areas: grid-template-areas:
"date_unread_marker date_row " "date_unread_marker date_row "
"message_unread_marker messagebox"; "message_unread_marker messagebox";
@ -121,9 +125,15 @@ $time_column_min_width: 42px; /* + padding */
display: grid; display: grid;
align-items: baseline; align-items: baseline;
padding-left: 10px; padding-left: 10px;
/* Prevent the message column from overflowing the 1fr
space allotted by specifying `minmax(0,1fr)`, which
sets 0 as the minimum size, not the grid default of
`auto`. */
grid-template: grid-template:
var(--message-box-icon-height) repeat(3, auto) / var(--message-box-icon-height) repeat(3, auto) /
$avatar_column_width auto calc(3 * var(--message-box-icon-width)) $avatar_column_width minmax(0, 1fr) calc(
3 * var(--message-box-icon-width)
)
8px minmax($time_column_min_width, max-content); 8px minmax($time_column_min_width, max-content);
/* Named grid areas provide flexibility for positioning grid items /* Named grid areas provide flexibility for positioning grid items
reliably, even if the row or column definitions of the grid change. */ reliably, even if the row or column definitions of the grid change. */
@ -261,9 +271,6 @@ $time_column_min_width: 42px; /* + padding */
is preserved from the message itself--keeping the time, is preserved from the message itself--keeping the time,
edit message, and controls at the same vertical alignment. */ edit message, and controls at the same vertical alignment. */
align-self: start; align-self: start;
/* Keep previewed messages from overflowing the grid area
that .message_edit is assigned to. */
overflow: hidden;
margin-top: $distance_of_non_text_elements_from_message_box; margin-top: $distance_of_non_text_elements_from_message_box;
} }