Custom body scrollbar + disable body scroll when overlay or image viewer opened (#897)

ui/component/app/view.jsx

@@ -295,6 +295,11 @@ function App(props: Props) {
     document.documentElement.setAttribute('theme', theme);
   }, [theme]);
 
+  useEffect(() => {
+    // $FlowFixMe
+    document.body.style.overflowY = currentModal ? 'hidden' : '';
+  }, [currentModal]);
+
   useEffect(() => {
     if (hasMyChannels && !hasActiveChannelClaim) {
       setActiveChannelIfNotSet();

ui/component/sideNavigation/view.jsx

@@ -250,6 +250,7 @@ function SideNavigation(props: Props) {
 
   const showMicroMenu = !sidebarOpen && !menuCanCloseCompletely;
   const showPushMenu = sidebarOpen && !menuCanCloseCompletely;
+  const showOverlay = isAbsolute && sidebarOpen;
 
   const showSubscriptionSection = shouldRenderLargeMenu && isPersonalized && subscriptions && subscriptions.length > 0;
   const showTagSection = sidebarOpen && isPersonalized && followedTags && followedTags.length;
@@ -362,6 +363,11 @@ function SideNavigation(props: Props) {
     return null;
   }
 
+  React.useEffect(() => {
+    // $FlowFixMe
+    document.body.style.overflowY = showOverlay ? 'hidden' : '';
+  }, [showOverlay]);
+
   React.useEffect(() => {
     if (purchaseSuccess) {
       setPulseLibrary(true);
@@ -501,7 +507,7 @@ function SideNavigation(props: Props) {
       </nav>
       <div
         className={classnames('navigation__overlay', {
-          'navigation__overlay--active': isAbsolute && sidebarOpen,
+          'navigation__overlay--active': showOverlay,
         })}
         onClick={() => setSidebarOpen(false)}
       />

ui/scss/component/_header.scss

@@ -5,7 +5,7 @@
   z-index: 3; // Main content uses z-index: 1, other content uses z-index: 2, this ensures it always scrolls under the header
   position: fixed;
   top: 0;
-  width: 100%;
+  width: 100vw;
   background-color: var(--color-header-background);
   font-size: var(--font-body);
   user-select: none;
@@ -137,6 +137,7 @@
   height: var(--header-height);
   padding: var(--spacing-s) var(--spacing-m);
   flex-wrap: nowrap;
+  margin-right: var(--body-scrollbar-width);
 
   .wunderbar__wrapper {
     .wunderbar__input {

ui/scss/init/_gui.scss

@@ -20,6 +20,8 @@ html {
 }
 
 body {
+  width: calc(100vw - var(--body-scrollbar-width));
+
   font-size: 1em;
   cursor: default;
   line-height: 1.5;
@@ -33,11 +35,20 @@ body {
   scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
 }
 
-body *::-webkit-scrollbar {
-  width: 6px;
+body::-webkit-scrollbar {
+  width: var(--body-scrollbar-width);
   height: 6px;
 }
 
+body *::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: 6px;
+}
+
+body::-webkit-scrollbar-track {
+  background: var(--color-body-scrollbar-track-bg);
+}
+
 body *::-webkit-scrollbar-track {
   background: var(--color-scrollbar-track-bg);
 }
@@ -47,7 +58,12 @@ body *::-webkit-scrollbar-thumb {
   // standard currently doesn't support it. Stick with square
   // scrollbar for all browsers.
   background-color: var(--color-scrollbar-thumb-bg);
-  border-radius: 4px;
+  border-radius: var(--scrollbar-radius);
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: var(--color-scrollbar-thumb-bg);
+  border-radius: var(--scrollbar-radius);
 }
 
 hr {

ui/scss/init/_vars.scss

@@ -107,10 +107,16 @@
   // Animations
   --resizing-animation-function: ease-in;
   --resizing-animation-timing: 180ms;
+
+  //Scrollbars
+  --body-scrollbar-width: 12px;
+  --scrollbar-width: 6px;
+  --scrollbar-radius: 0.5rem;
 }
 
 @media (max-width: $breakpoint-small) {
   :root {
     --font-body: 0.8rem;
+    --body-scrollbar-width: 0px;
   }
 }

ui/scss/themes/dark.scss

@@ -158,6 +158,7 @@
   // Scrollbar
   --color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
   --color-scrollbar-track-bg: transparent;
+  --color-body-scrollbar-track-bg: rgba(0, 0, 0, 0.5);
 
   --background-shade: linear-gradient(-180deg, rgba(25, 25, 25, 0.2) 2%, #202020),
     radial-gradient(circle at 50% 117%, rgba(25, 25, 25, 0.2) 0, #202020 100%);

ui/scss/themes/light.scss

@@ -180,6 +180,7 @@
   // Scrollbar
   --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
   --color-scrollbar-track-bg: transparent;
+  --color-body-scrollbar-track-bg: var(--color-header-button);
 
   --background-shade: linear-gradient(-180deg, rgba(var(--color-background-base), 0.6) 2%, #f1f1f1),
     radial-gradient(circle at 50% 217%, rgba(var(--color-background-base), 0.6) 0, #f8f8f8 100%);