From cf65f0867bff50f5f282f6c4dd3d01f4b1c06ac7 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 4 Feb 2026 20:24:54 +0800
Subject: [PATCH] refactor: remove hide-scrollbar utility

Removed the hide-scrollbar CSS class and all its usages throughout the
codebase. Hiding scrollbars can hurt UX by making it unclear when
content is scrollable.

Changes:
- Removed hide-scrollbar CSS definition from index.css
- Removed hide-scrollbar class from Navigation component (2 instances)
- Removed hide-scrollbar class from MemoDetailSidebar (2 instances)
- Removed hide-scrollbar class from TagsSection
- Removed hide-scrollbar class from ShortcutsSection

Components now use standard browser scrollbar behavior, which provides
better visual feedback to users about scrollable content. Modern
browsers already handle scrollbar appearance elegantly.
---
 web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx | 6 ++----
 web/src/components/MemoExplorer/ShortcutsSection.tsx       | 2 +-
 web/src/components/MemoExplorer/TagsSection.tsx            | 2 +-
 web/src/components/Navigation.tsx                          | 4 ++--
 web/src/components/StatisticsView/MonthNavigator.tsx       | 2 +-
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx b/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
index 4a3822afa..f9659969a 100644
--- a/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
+++ b/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
@@ -42,10 +42,8 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
   };
 
   return (
-    <aside
-      className={cn("relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start", className)}
-    >
-      <div className="flex flex-col justify-start items-start w-full gap-4 h-auto shrink-0 flex-nowrap hide-scrollbar">
+    <aside className={cn("relative w-full h-auto max-h-screen overflow-auto flex flex-col justify-start items-start", className)}>
+      <div className="flex flex-col justify-start items-start w-full gap-4 h-auto shrink-0 flex-nowrap">
         {hasReferenceRelations && (
           <div className="relative w-full h-36 border border-border rounded-lg bg-muted overflow-hidden">
             <MemoRelationForceGraph className="w-full h-full" memo={memo} parentPage={parentPage} />
diff --git a/web/src/components/MemoExplorer/ShortcutsSection.tsx b/web/src/components/MemoExplorer/ShortcutsSection.tsx
index 6b6c5091e..853b61f9e 100644
--- a/web/src/components/MemoExplorer/ShortcutsSection.tsx
+++ b/web/src/components/MemoExplorer/ShortcutsSection.tsx
@@ -61,7 +61,7 @@ function ShortcutsSection() {
   };
 
   return (
-    <div className="w-full flex flex-col justify-start items-start mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
+    <div className="w-full flex flex-col justify-start items-start mt-3 px-1 h-auto shrink-0 flex-nowrap">
       <div className="flex flex-row justify-between items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none">
         <span>{t("common.shortcuts")}</span>
         <TooltipProvider>
diff --git a/web/src/components/MemoExplorer/TagsSection.tsx b/web/src/components/MemoExplorer/TagsSection.tsx
index 1cd662a0a..1abe21a3e 100644
--- a/web/src/components/MemoExplorer/TagsSection.tsx
+++ b/web/src/components/MemoExplorer/TagsSection.tsx
@@ -37,7 +37,7 @@ const TagsSection = (props: Props) => {
   };
 
   return (
-    <div className="w-full flex flex-col justify-start items-start mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
+    <div className="w-full flex flex-col justify-start items-start mt-3 px-1 h-auto shrink-0 flex-nowrap">
       <div className="flex flex-row justify-between items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none">
         <span>{t("common.tags")}</span>
         {tags.length > 0 && (
diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index 3778459bc..484f0837b 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -74,8 +74,8 @@ const Navigation = (props: Props) => {
     : [exploreNavLink, signInNavLink];
 
   return (
-    <header className={cn("w-full h-full overflow-auto flex flex-col justify-between items-start gap-4 hide-scrollbar", className)}>
-      <div className="w-full px-1 py-1 flex flex-col justify-start items-start space-y-2 overflow-auto overflow-x-hidden hide-scrollbar shrink">
+    <header className={cn("w-full h-full overflow-auto flex flex-col justify-between items-start gap-4", className)}>
+      <div className="w-full px-1 py-1 flex flex-col justify-start items-start space-y-2 overflow-auto overflow-x-hidden shrink">
         <NavLink className="mb-3 cursor-default" to={currentUser ? Routes.ROOT : Routes.EXPLORE}>
           <MemosLogo collapsed={collapsed} />
         </NavLink>
diff --git a/web/src/components/StatisticsView/MonthNavigator.tsx b/web/src/components/StatisticsView/MonthNavigator.tsx
index b15f43f40..f9ac48ab5 100644
--- a/web/src/components/StatisticsView/MonthNavigator.tsx
+++ b/web/src/components/StatisticsView/MonthNavigator.tsx
@@ -50,7 +50,7 @@ export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats
           </button>
         </DialogTrigger>
         <DialogContent
-          className="p-0 border border-border/20 bg-background md:max-w-6xl w-[min(100vw-24px,1200px)] max-h-[85vh] overflow-auto rounded-xl shadow-xl"
+          className="p-0 border border-border/20 bg-background md:max-w-6xl w-[min(100vw-24px,1200px)] max-h-[85vh] overflow-y-auto rounded-xl shadow-xl"
           size="2xl"
           showCloseButton={false}
         >