paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

top_navbar: Use flexbox to align icon, stream name, and description.

Browse Source
This commit is contained in:
Karl Stolley
2023-11-17 13:12:36 -06:00
committed by Tim Abbott
parent 000299a323
commit 6271f4d6ba
1 changed files with 11 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/styles/zulip.css
View File

@@ -2274,6 +2274,7 @@ div.focused-message-list {
width: 100%; width: 100%;
line-height: var(--header-height); line-height: var(--header-height);
display: flex; display: flex;
align-items: baseline;
white-space: nowrap; white-space: nowrap;
cursor: default; cursor: default;
@@ -2293,9 +2294,19 @@ div.focused-message-list {
text-decoration: none; text-decoration: none;
/* Don't yield any space needed for the stream name. */ /* Don't yield any space needed for the stream name. */
flex-shrink: 0; flex-shrink: 0;
/* Create a flex container for the icon and
stream name. */
display: flex;
/* We want to use baseline alignment so that the
stream name and narrow description sit on
the same invisible line. */
align-items: baseline;
.zulip-icon { .zulip-icon {
font-size: 14px; font-size: 14px;
/* Pull the icon out of baseline alignment,
and center with stream name. */
align-self: center;
} }
@media (width < $sm_min) { @media (width < $sm_min) {