adjust ScrollArea component layout.

src/components/ScrollArea.module.css

@@ -6,6 +6,12 @@
     overflow: hidden;
     grid-template-columns: auto calc(var(--spacing) * 3);
     grid-template-rows: auto calc(var(--spacing) * 3);
+    &.hide_thumb_y {
+      grid-template-columns: auto 0;
+    }
+    &.hide_thumb_x {
+      grid-template-rows: auto 0;
+    }
   }
   .content {
     grid-column: 1;

src/components/ScrollArea.tsx

@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import { clamp } from 'lodash-es';
 import { MouseEvent, RefObject, useEffect, useRef, useState, WheelEvent } from 'react';
 import styles from './ScrollArea.module.css';
@@ -184,7 +185,12 @@ export function ScrollArea({
   }, [children]);
 
   return (
-    <div className={styles.scroll_area}>
+    <div
+      className={cx(
+        styles.scroll_area,
+        !yScrollNeeded && styles.hide_thumb_y,
+        !xScrollNeeded && styles.hide_thumb_x,
+      )}>
       <div className={styles.content} ref={scrollContainerRef} onWheel={(e) => handleWheel(e)}>
         {children}
       </div>