From 6b893f668fef5a40d8b4ac667d84f7f57d9a0c4b Mon Sep 17 00:00:00 2001
From: JoeJoeflyn <thaitainguyen336@gmail.com>
Date: Fri, 21 Aug 2026 23:07:13 +0700
Subject: [PATCH] fix: hide sidebar scrollbar when collapsed. Closes #4464.

---
 src/app/(main)/SideNav.tsx                         | 6 +++++-
 src/components/common/OverlayScrollArea.module.css | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx
index 360c0c1dd..8a94dd8a3 100644
--- a/src/app/(main)/SideNav.tsx
+++ b/src/app/(main)/SideNav.tsx
@@ -14,6 +14,7 @@ import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
 import { IconLabel } from '@/components/common/IconLabel';
 import Link from '@/components/common/Link';
 import { OverlayScrollArea } from '@/components/common/OverlayScrollArea';
+import styles from '@/components/common/OverlayScrollArea.module.css';
 import { useGlobalState, useMessages, useNavigation } from '@/components/hooks';
 import {
   Globe,
@@ -104,7 +105,10 @@ export function SideNav(props: any) {
           <PanelButton />
         </Row>
       </Row>
-      <OverlayScrollArea style={{ flexGrow: 1, minHeight: 0 }}>
+      <OverlayScrollArea
+        className={isCollapsed ? styles.collapsed : undefined}
+        style={{ flexGrow: 1, minHeight: 0 }}
+      >
         {websiteId ? (
           <WebsiteNav websiteId={websiteId} isCollapsed={isCollapsed} />
         ) : pathname.includes('/settings') ? (
diff --git a/src/components/common/OverlayScrollArea.module.css b/src/components/common/OverlayScrollArea.module.css
index dcd274748..b78fa2bb9 100644
--- a/src/components/common/OverlayScrollArea.module.css
+++ b/src/components/common/OverlayScrollArea.module.css
@@ -6,6 +6,10 @@
   --overlay-scrollbar-vertical-margin-right: 2px;
 }
 
+.collapsed > [data-orientation] {
+  display: none;
+}
+
 .root > :first-child {
   padding-right: var(--overlay-scrollbar-viewport-padding-right);
 }