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

right_sidebar: Better handle manually hidden right sidebar.

Browse Source 
With the larger, flexibly sized right sidebar, we want to allow
for the middle column to expand to fill its place even outside of
the "Use full width on wide screens" setting.
This commit is contained in:
Karl Stolley
2025-02-19 09:33:41 -06:00
committed by Tim Abbott
parent 1c74b1635b
commit 34cd1e2c27
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/app_variables.css
View File

@@ -262,6 +262,8 @@
--left-sidebar-width: min(33.3333%, var(--left-sidebar-max-width));
/* 40px (toggle icon) + 5px (gap) + 20px logo + 10px right margin */
--left-sidebar-width-with-realm-icon-logo: 75px;
/* 50px per icon * 4 icons + 3px space (legacy) = 203px at 20px/1em */
--right-column-collapsed-sidebar-width: 10.15em;
/* 288px at 14px/1em */
--right-column-max-width: 20.57em;
--right-column-width: clamp(10em, 50%, var(--right-column-max-width));

14
web/styles/zulip.css
View File

@@ -1594,11 +1594,13 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
@extend %hide-right-sidebar;
}
&.fluid_layout_width {
#compose-content,
.app-main .column-middle {
margin-right: 7px;
}
#navbar-middle {
margin-right: var(--right-column-collapsed-sidebar-width);
}
#compose-content,
.app-main .column-middle {
margin-right: 7px;
}
}
@@ -1715,7 +1717,7 @@ body:not(.hide-left-sidebar) {
@container header-container (width < $cq_xl_min) {
#navbar-middle {
/* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
margin-right: calc(var(--header-height) * 4 + 3px);
margin-right: var(--right-column-collapsed-sidebar-width);
}
}