From 51c9d68be27313c47b2f3afdd2d27d83e0935bc6 Mon Sep 17 00:00:00 2001
From: lenhanphung <44486647+lenhanphung@users.noreply.github.com>
Date: Mon, 27 Oct 2025 12:15:56 +0700
Subject: [PATCH] fix #252: sidebar width shift when hover (#255)

---
 src/components/Calendar/Calendar.styl | 25 +++++++++++++++++++++----
 src/components/Calendar/Calendar.tsx  |  2 +-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/Calendar/Calendar.styl b/src/components/Calendar/Calendar.styl
index 9515d2f..99b73df 100644
--- a/src/components/Calendar/Calendar.styl
+++ b/src/components/Calendar/Calendar.styl
@@ -24,14 +24,31 @@
 .sidebar
   border-right 2px solid #f3f4f6
   width 350px
-  padding-top 16px
-  padding-left 5px
   height 100%
   flex-direction column
-  overflow-y: hidden
+  overflow-y: scroll
+  overflow-x: hidden
+  scrollbar-width: thin
+  scrollbar-color: transparent transparent
+
+.sidebar::-webkit-scrollbar
+  width: 8px
+
+.sidebar::-webkit-scrollbar-track
+  background: transparent
+
+.sidebar::-webkit-scrollbar-thumb
+  background-color: rgba(0, 0, 0, 0.3)
+  border-radius: 4px
+  opacity: 0
+  transition: opacity 0.3s ease
+
+.sidebar:hover::-webkit-scrollbar-thumb
+  background-color: rgba(0, 0, 0, 0.5)
+  opacity: 1
 
 .sidebar:hover
-  overflow-y: auto
+  scrollbar-color: rgba(0, 0, 0, 0.5) transparent
 
 .declined-event
   opacity 0.7
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index 0aecbbe..72bcdce 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -274,7 +274,7 @@ export default function CalendarApp({
       <Box
         className="sidebar"
         sx={{
-          padding: "0 25px 16px",
+          padding: "0 15px 16px 25px",
           position: "relative",
         }}
       >