paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

scroll_bar: Fix overlapping right sidebar and browser scrollbars.

Browse Source 
Fixes #25779

We move the simplebar scroll on the right sidebar to a little left
when there is an overlay scrollbar present so that user can drag
either of them.
This commit is contained in:
Aman Agrawal
2023-05-29 17:01:58 +05:30
committed by Tim Abbott
parent 4724d45abd
commit 230b3f075b
2 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/scroll_bar.ts
View File

@@ -10,6 +10,27 @@ export function set_layout_width(): void {
} }
} }
export function handle_overlay_scrollbars(): void {
// If right sidebar scrollbar overlaps with browser scrollbar, move the right
// sidebar scrollbar to the left. Done on fluid screen width and when scrollbars overlap.
const scrollbar_width = window.innerWidth - document.documentElement.clientWidth;
if (scrollbar_width === 0) {
const max_app_width = 1400;
const max_scrollbar_width = 20;
const are_scrollbars_overlapping = window.innerWidth < max_app_width + max_scrollbar_width;
if (user_settings.fluid_layout_width || are_scrollbars_overlapping) {
$("body").addClass("has-overlay-scrollbar");
return;
}
}
$("body").removeClass("has-overlay-scrollbar");
}
export function initialize(): void { export function initialize(): void {
set_layout_width(); set_layout_width();
handle_overlay_scrollbars();
const middle_column = $(".app .column-middle").expectOne()[0];
const resize_observer = new ResizeObserver(handle_overlay_scrollbars);
resize_observer.observe(middle_column);
} }

21
web/styles/zulip.css
View File

@@ -105,6 +105,15 @@ body {
*/ */
--disabled-scrollbar-width: 0px; --disabled-scrollbar-width: 0px;
/*
Right offset of simplebar scrollbar for `.column-right` when browser has
overlay scrollbars which don't occupy any space. Currently only
known to present on Mac (all browsers) and Firefox (all OS?). This seems
more than enough to differentiate right sidebar scrollbar and browser
scrollbar even if the browser scrollbar is wider.
*/
--browser-overlay-scrollbar-width: 10px;
/* Colors used across the app */ /* Colors used across the app */
--color-background-private-message-header: hsl(46deg 35% 93%); --color-background-private-message-header: hsl(46deg 35% 93%);
--color-background-private-message-content: hsl(45deg 20% 96%); --color-background-private-message-content: hsl(45deg 20% 96%);
@@ -553,6 +562,14 @@ p.n-margin {
position: relative; position: relative;
} }
body.has-overlay-scrollbar {
/* Move simplebar scrollbar to the left so that
browser scrollbar doesn't overlap with it. */
.column-right .simplebar-track.simplebar-vertical {
right: var(--browser-overlay-scrollbar-width);
}
}
.column-right { .column-right {
width: var(--right-sidebar-width); width: var(--right-sidebar-width);
max-width: var(--right-sidebar-width); max-width: var(--right-sidebar-width);
@@ -2853,6 +2870,10 @@ select.invite-as {
right: 15px; right: 15px;
top: 0; top: 0;
.simplebar-track.simplebar-vertical {
right: 0;
}
.right-sidebar { .right-sidebar {
box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%); box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
border-left: 1px solid hsl(0deg 0% 87%); border-left: 1px solid hsl(0deg 0% 87%);