adjust ScrollArea control strategy.

src/components/ScrollArea.module.css

@@ -4,15 +4,16 @@
     min-width: 0;
     min-height: 0;
     overflow: hidden;
-    padding-inline-end: calc(var(--spacing) * 2);
-    padding-block-end: calc(var(--spacing) * 2);
     grid-template-columns: auto calc(var(--spacing) * 3);
     grid-template-rows: auto calc(var(--spacing) * 3);
+    gap: calc(var(--spacing) * 2);
     &.hide_thumb_y {
       grid-template-columns: auto 0;
+      column-gap: 0;
     }
     &.hide_thumb_x {
       grid-template-rows: auto 0;
+      row-gap: 0;
     }
   }
   .content {

src/components/ScrollArea.tsx

@@ -177,12 +177,25 @@ export function ScrollArea({
   };
 
   useEffect(() => {
+    const sizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
         const container = scrollContainerRef.current;
         if (container) {
           setXScrollNeeded(container.scrollWidth > container.clientWidth);
           setYScrollNeeded(container.scrollHeight > container.clientHeight);
         }
-  }, [children]);
+      }
+    });
+    if (scrollContainerRef.current) {
+      sizeObserver.observe(scrollContainerRef.current);
+    }
+    return () => {
+      if (scrollContainerRef.current) {
+        sizeObserver.unobserve(scrollContainerRef.current);
+      }
+      sizeObserver.disconnect();
+    };
+  }, []);
 
   return (
     <div