fix #252: sidebar width shift when hover (#255)

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

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",
         }}
       >