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

navbar: Fix navbar heading gap when using full width. 

Added CSS variable for left column width in the navbar.

Fixes: #30619.
This commit is contained in:
adnan-td 2024-07-02 22:27:16 +05:30
parent cc7df6d85b
commit ac0bb46c52
2 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/styles/app_variables.css
View File

@ -41,6 +41,19 @@
/* Keep content from colliding with the search box. */
--navbar-content-righthand-offset: 5px;
/*
Width of navbar left column
40px (Sidebar toggle icon) + 80px (wide logo).
*/
--navbar-left-column-width: 120px;
/*
Both icon and logo change in width when height of header is reduced
30px (Sidebar toggle icon) + 60px (wide logo)
*/
@media (height < $short_navbar_cutoff_height) {
--navbar-left-column-width: 90px;
}
/*
We have a 10px gutter below the header,
which often needs to be respected by both

6
web/styles/zulip.css
View File

@ -1869,6 +1869,12 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
@extend %hide-left-sidebar;
&.fluid_layout_width {
/* Since left sidebar is closed, update margin-left from --left-sidebar-width
to --navbar-left-column-width. Add sufficient space to the right of left column */
.column-middle {
margin-left: calc(var(--navbar-left-column-width) + 30px);
}
#compose-content,
.app-main .column-middle {
margin-left: 7px;