From 34cd1e2c27770e4674e80cd71ed6ec65d6a01f79 Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Wed, 19 Feb 2025 09:33:41 -0600 Subject: [PATCH] right_sidebar: Better handle manually hidden right sidebar. 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. --- web/styles/app_variables.css | 2 ++ web/styles/zulip.css | 14 ++++++++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index aa923c0685..a593737153 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -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)); diff --git a/web/styles/zulip.css b/web/styles/zulip.css index d5d9ba371b..3774cf8016 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -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); } }