diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index 6a26464c10a..3c89a1e04cb 100644
--- a/ui/component/app/view.jsx
+++ b/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();
diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index 7be752f7b2a..3b63ef7ae53 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/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) {
setSidebarOpen(false)}
/>
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index d610a8313e4..86b6642d70a 100644
--- a/ui/scss/component/_header.scss
+++ b/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 {
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 0cefd75fc74..2b3dfc621cb 100644
--- a/ui/scss/init/_gui.scss
+++ b/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: var(--body-scrollbar-width);
+ height: 6px;
+}
+
body *::-webkit-scrollbar {
- width: 6px;
+ 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 {
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index cf8633e8df2..e3de4d7ab66 100644
--- a/ui/scss/init/_vars.scss
+++ b/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;
}
}
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index acde6f16b38..0d8fae52e97 100644
--- a/ui/scss/themes/dark.scss
+++ b/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%);
diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss
index e929466daa7..ae5e728f72b 100644
--- a/ui/scss/themes/light.scss
+++ b/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%);