src/assets/css/components/common/sidebar.scss

@@ -202,6 +202,8 @@
       font-size: 1.4em;
       color: constants.$font-main-color;
       user-select: text;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       a{
         color: constants.$main-color;

src/components/common/HideScrollbar.tsx

@@ -411,8 +411,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         setRefreshTime(Date.now())
     }
 
-    useEffect(() => {
+    const reloadScrollbar = () => {
-        const resizeObserver = new ResizeObserver(() => {
         setVerticalScrollbarWidth(
             (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
         )
@@ -429,12 +428,20 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             setHorizontalScrollbarLength(
                 (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
             )
+
         refreshLayout()
+    }
+
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            reloadScrollbar()
         })
         maskRef.current && resizeObserver.observe(maskRef.current)
+        contentRef.current && resizeObserver.observe(contentRef.current)
 
         return () => {
             maskRef.current && resizeObserver.unobserve(maskRef.current)
+            contentRef.current && resizeObserver.unobserve(contentRef.current)
         }
     }, [])