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

right_sidebar: Make width easier to reason about.

Browse Source
This commit is contained in:
Karl Stolley
2025-03-03 14:52:32 -06:00
committed by Tim Abbott
parent 17629c0f9c
commit 060b57470f
2 changed files with 9 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/styles/app_variables.css
View File

@@ -267,18 +267,15 @@
This is very useful for areas in the CSS codebase This is very useful for areas in the CSS codebase
that rely on this value, but not necessarily as that rely on this value, but not necessarily as
applied to `width:` or `max-width:`. */ applied to `width:` or `max-width:`. */
--left-sidebar-width: min(33.3333%, var(--left-sidebar-max-width)); --left-sidebar-width: min(33.3333vw, var(--left-sidebar-max-width));
--right-sidebar-left-spacing: 5px; --right-sidebar-left-spacing: 5px;
/* 50px per icon * 4 icons + 3px space (legacy) = 203px at 20px/1em */ /* 50px per icon * 4 icons + 3px space (legacy) = 203px at 20px/1em */
--right-column-collapsed-sidebar-width: 10.15em; --right-column-collapsed-sidebar-width: 10.15em;
/* 288px at 14px/1em */ /* 288px at 14px/1em */
--right-column-max-width: 20.57em; --right-sidebar-max-width: 20.57em;
/* We open the right sidebar at xl_min at a size of 240px, /* We open the right sidebar at xl_min at a size of 240px,
here expressed as precisely 20% of the viewport. */ here expressed as precisely 20% of the viewport. */
--right-column-width: min(20%, var(--right-column-max-width)); --right-sidebar-width: min(20vw, var(--right-sidebar-max-width));
--right-sidebar-width: calc(
var(--right-column-width) - var(--right-sidebar-left-spacing)
);
/* 25px at 16px/1em */ /* 25px at 16px/1em */
--right-sidebar-vdots-width: 1.5625em; --right-sidebar-vdots-width: 1.5625em;
/* The width of the icon is reduced by 2px, to account for 2px /* The width of the icon is reduced by 2px, to account for 2px

16
web/styles/zulip.css
View File

@@ -41,7 +41,7 @@ body {
#compose-container { #compose-container {
max-width: calc( max-width: calc(
var(--left-sidebar-max-width) + var(--message-area-max-width) + var(--left-sidebar-max-width) + var(--message-area-max-width) +
var(--right-column-max-width) var(--right-sidebar-max-width)
); );
} }
@@ -53,7 +53,7 @@ body {
.app .app-main, .app .app-main,
#compose-container { #compose-container {
max-width: calc( max-width: calc(
var(--message-area-max-width) + var(--right-column-max-width) var(--message-area-max-width) + var(--right-sidebar-max-width)
); );
/* When we're less than the xl_min breakpoint, we instead /* When we're less than the xl_min breakpoint, we instead
@@ -398,8 +398,8 @@ body.has-overlay-scrollbar {
/* This applies to column-left both in navbar and app. */ /* This applies to column-left both in navbar and app. */
.column-right { .column-right {
width: var(--right-column-width); width: var(--right-sidebar-width);
max-width: var(--right-column-max-width); max-width: var(--right-sidebar-max-width);
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@@ -628,7 +628,7 @@ body.has-overlay-scrollbar {
.column-middle, .column-middle,
#compose-content { #compose-content {
margin-right: var(--right-column-width); margin-right: var(--right-sidebar-width);
margin-left: calc( margin-left: calc(
var(--left-sidebar-width) + var(--left-sidebar-padding-left) var(--left-sidebar-width) + var(--left-sidebar-padding-left)
); );
@@ -1557,11 +1557,7 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
/* In the extended state, we open the sidebar /* In the extended state, we open the sidebar
to its maximum possible size (otherwise, it to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */ would be unnecessarily too narrow). */
--right-column-width: var(--right-column-max-width); --right-sidebar-width: var(--right-sidebar-max-width);
--right-sidebar-width: calc(
var(--right-column-max-width) -
var(--right-sidebar-left-spacing)
);
display: block; display: block;
position: absolute; position: absolute;
float: none; float: none;