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

left_sidebar: Set vertical alignment on 22px-tall DM row.

This commit is contained in:
Karl Stolley 2023-10-31 10:23:17 -05:00 committed by Tim Abbott
parent 4e03209c76
commit b50a09f99e
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/styles/left_sidebar.css
View File

@ -660,7 +660,10 @@ li.top_left_scheduled_messages {
.conversation-partners {
grid-area: row-content;
line-height: 1.25;
/* Set an 18px line-height to better vertically
center user circles and icons (both of which
have even heights). */
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
}
@ -1002,9 +1005,8 @@ li.topic-list-item {
.dm-box {
grid-template-columns: 7px 22px minmax(0, 1fr) minmax(0, max-content) 30px 0;
/* This padding maintains the legacy 22.5px height
on DM rows. */
padding: 2.5px 0;
/* This padding maintains a 22px height on DM rows. */
padding: 2.25px 0;
.conversation-partners-icon {
grid-area: starting-anchor-element;
@ -1028,6 +1030,22 @@ li.topic-list-item {
.unread_count {
grid-area: markers-and-controls;
/* TODO: This is an alternative method
for presenting a 16px-tall unread
counter, regardless of context. This
method could be used app-wide once
all of the layout methods for presenting
unreads have been modernized.
Set the line-height to match the
font-size, so that the numerals sit in
a 12px box. */
line-height: 12px;
/* Use flexbox to vertically center
the 12px-high text node within the
16px-high unread box. */
display: flex;
align-items: center;
}
}