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

top_navbar: Extend new flex-based styles to navbar titles.

Browse Source
This commit is contained in:
Karl Stolley
2023-11-17 13:16:05 -06:00
committed by Tim Abbott
parent 6271f4d6ba
commit 6d452dbe6e
1 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/styles/zulip.css
View File

@@ -2282,14 +2282,14 @@ div.focused-message-list {
display: none; display: none;
} }
.message-header-stream-settings-button { .message-header-stream-settings-button,
.navbar_title {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
margin: 0 -4px 0 0; margin: 0 -4px 0 0;
padding: 0 6px; padding: 0 6px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-overflow: clip;
color: inherit; color: inherit;
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. */
@@ -2309,6 +2309,10 @@ div.focused-message-list {
align-self: center; align-self: center;
} }
.zulip-icon-inbox {
font-size: 16px;
}
@media (width < $sm_min) { @media (width < $sm_min) {
padding: 0 3.5px; /* based on having ~41.66% decrease */ padding: 0 3.5px; /* based on having ~41.66% decrease */
} }
@@ -2336,6 +2340,11 @@ div.focused-message-list {
} }
} }
.message-header-navbar-title {
overflow: hidden;
text-overflow: ellipsis;
}
.narrow_description { .narrow_description {
/* the actual value of flex shrink does not matter, it is the /* the actual value of flex shrink does not matter, it is the
ratio of this value to other flex items that determines the ratio of this value to other flex items that determines the
@@ -2357,10 +2366,13 @@ div.focused-message-list {
/* The very last element in the navbar is the search icon, the second /* The very last element in the navbar is the search icon, the second
last element is either the narrow description (for stream narrows) or last element is either the narrow description (for stream narrows) or
the "title" (for other narrows). The flex-grow property ensures these the "title" (for other narrows). The flex-grow property ensures these
elements take up the entirety of the white space. */ elements take up the entirety of the white space, while flex-shrink
accommodates narrower viewports. Setting flex-basis 0 enables an
ellipsis to be displayed, as the 0 takes the place of the max-content
default that would otherwise run titles under the search box. */
.navbar_title, .navbar_title,
.narrow_description { .narrow_description {
flex-grow: 1; flex: 1 1 0;
margin: 0; margin: 0;
/* Calculate right margin so that text can truncate /* Calculate right margin so that text can truncate
and not collide with the search section. */ and not collide with the search section. */