From a37c21f7e7fa279361b4fd3714abb3043011b432 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Fri, 28 Feb 2025 16:17:11 +0800
Subject: [PATCH] adjust ScrollArea component layout.

---
 src/components/ScrollArea.module.css | 6 ++++++
 src/components/ScrollArea.tsx        | 8 +++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/ScrollArea.module.css b/src/components/ScrollArea.module.css
index 700b93f..26eca18 100644
--- a/src/components/ScrollArea.module.css
+++ b/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;
diff --git a/src/components/ScrollArea.tsx b/src/components/ScrollArea.tsx
index 4357298..15b179d 100644
--- a/src/components/ScrollArea.tsx
+++ b/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>