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: 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
that rely on this value, but not necessarily as
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;
/* 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-sidebar-max-width: 20.57em;
/* We open the right sidebar at xl_min at a size of 240px,
here expressed as precisely 20% of the viewport. */
--right-column-width: min(20%, var(--right-column-max-width));
--right-sidebar-width: calc(
var(--right-column-width) - var(--right-sidebar-left-spacing)
);
--right-sidebar-width: min(20vw, var(--right-sidebar-max-width));
/* 25px at 16px/1em */
--right-sidebar-vdots-width: 1.5625em;
/* 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 {
max-width: calc(
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,
#compose-container {
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
@@ -398,8 +398,8 @@ body.has-overlay-scrollbar {
/* This applies to column-left both in navbar and app. */
.column-right {
width: var(--right-column-width);
max-width: var(--right-column-max-width);
width: var(--right-sidebar-width);
max-width: var(--right-sidebar-max-width);
position: absolute;
right: 0;
top: 0;
@@ -628,7 +628,7 @@ body.has-overlay-scrollbar {
.column-middle,
#compose-content {
margin-right: var(--right-column-width);
margin-right: var(--right-sidebar-width);
margin-left: calc(
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
to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */
--right-column-width: var(--right-column-max-width);
--right-sidebar-width: calc(
var(--right-column-max-width) -
var(--right-sidebar-left-spacing)
);
--right-sidebar-width: var(--right-sidebar-max-width);
display: block;
position: absolute;
float: none;