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

left_sidebar: Update left sidebar padding for new design. 

This also moves the 2px of reduced lefthand padding to the overall
width of the left sidebar, which will keep the left sidebar at its
same width (in other words, the message area will not shift any
further to the left, either).

Fixes #27565
This commit is contained in:
Karl Stolley 2024-08-02 12:42:23 -05:00 committed by Tim Abbott
parent 7424d4e721
commit a22aa41367
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/styles/app_variables.css
View File

@ -218,7 +218,7 @@
Our sidebars (and anything that top-align
with them) go beneath the header.
*/
--left-sidebar-collapse-widget-gutter: 10px;
--left-sidebar-padding-left: 8px;
/* The width of the empty space in the sidebar to separate
content from the edge of the window */
--left-sidebar-far-left-gutter-size: 10px;
@ -244,8 +244,10 @@
and @ mention indicators by 3px on the right */
--left-sidebar-before-unread-count-padding: 3px;
--left-sidebar-right-margin: 12px;
/* 287px at 14px/1em */
--left-sidebar-max-width: calc(20.5em - var(--left-sidebar-right-margin));
/* 289px at 14px/1em */
--left-sidebar-max-width: calc(
20.6429em - var(--left-sidebar-right-margin)
);
/* Sidebar width is 1/3 of the screen at smaller
sizes, but gets held to the left sidebar's max width.
This is very useful for areas in the CSS codebase

4
web/styles/zulip.css
View File

@ -535,7 +535,7 @@ body.has-overlay-scrollbar {
.column-left .left-sidebar {
width: var(--left-sidebar-width);
padding-left: var(--left-sidebar-collapse-widget-gutter);
padding-left: var(--left-sidebar-padding-left);
}
.column-right .right-sidebar {
@ -553,7 +553,7 @@ body.has-overlay-scrollbar {
#compose-content {
margin-right: var(--right-sidebar-width);
margin-left: calc(
var(--left-sidebar-width) + var(--left-sidebar-collapse-widget-gutter)
var(--left-sidebar-width) + var(--left-sidebar-padding-left)
);
position: relative;
}