From 230b3f075bf93a35ee9c7740ee230e6f05d2bbb0 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Mon, 29 May 2023 17:01:58 +0530
Subject: [PATCH] scroll_bar: Fix overlapping right sidebar and browser
 scrollbars.

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.
---
 web/src/scroll_bar.ts | 21 +++++++++++++++++++++
 web/styles/zulip.css  | 21 +++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/web/src/scroll_bar.ts b/web/src/scroll_bar.ts
index 485e86d00f..78933fb8ac 100644
--- a/web/src/scroll_bar.ts
+++ b/web/src/scroll_bar.ts
@@ -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 {
     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);
 }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index eb44217488..5ceb977662 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -105,6 +105,15 @@ body {
     */
     --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 */
     --color-background-private-message-header: hsl(46deg 35% 93%);
     --color-background-private-message-content: hsl(45deg 20% 96%);
@@ -553,6 +562,14 @@ p.n-margin {
     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 {
     width: var(--right-sidebar-width);
     max-width: var(--right-sidebar-width);
@@ -2853,6 +2870,10 @@ select.invite-as {
             right: 15px;
             top: 0;
 
+            .simplebar-track.simplebar-vertical {
+                right: 0;
+            }
+
             .right-sidebar {
                 box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
                 border-left: 1px solid hsl(0deg 0% 87%);