From 3c8cf08c5d35defc9cf22553c646cbbcf97ca8ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 6 Jan 2025 13:34:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=87=AA=E5=AE=9A=E4=B9=89Sc?=
 =?UTF-8?q?roll=E5=B8=83=E5=B1=80=E7=BB=84=E4=BB=B6=E6=9B=BF=E4=BB=A3?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E9=BB=98=E8=AE=A4=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Wheels.module.css |   1 -
 src/pages/Wheels.tsx        | 103 +++++++++++++++++++-----------------
 2 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/pages/Wheels.module.css b/src/pages/Wheels.module.css
index a9e8576..14780ad 100644
--- a/src/pages/Wheels.module.css
+++ b/src/pages/Wheels.module.css
@@ -9,7 +9,6 @@
     flex-direction: row;
     align-items: stretch;
     gap: var(--spacing-m);
-    overflow-y: auto;
   }
   .function_side {
     display: flex;
diff --git a/src/pages/Wheels.tsx b/src/pages/Wheels.tsx
index e9ccdcc..84043d4 100644
--- a/src/pages/Wheels.tsx
+++ b/src/pages/Wheels.tsx
@@ -3,6 +3,7 @@ import { useAtom } from 'jotai';
 import { useState } from 'react';
 import { ColorPicker } from '../components/ColorPicker';
 import { LabeledPicker } from '../components/LabeledPicker';
+import { ScrollArea } from '../components/ScrollArea';
 import { VSegmentedControl } from '../components/VSegmentedControl';
 import { ColorWheel } from '../page-components/wheels/ColorWheel';
 import { currentPickedColor } from '../stores/colors';
@@ -20,58 +21,60 @@ export function Wheels() {
         <h3>Color Wheels</h3>
         <p>Choose the required color on the color wheel according to color theory.</p>
       </header>
-      <section className={styles.explore_section}>
-        <aside className={styles.function_side}>
-          <div>
-            <h5>Basic color</h5>
-            <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
-          </div>
-          <div>
-            <h5>Series Setting</h5>
-            <LabeledPicker
-              title="Expand Tones"
-              min={1}
-              max={5}
-              step={1}
-              value={tones}
-              onChange={setTones}
-            />
-            <LabeledPicker
-              title="Tone Step"
-              min={5}
-              max={50}
-              step={1}
-              unit="%"
-              value={steps}
-              onChange={setSteps}
+      <ScrollArea enableY>
+        <section className={styles.explore_section}>
+          <aside className={styles.function_side}>
+            <div>
+              <h5>Basic color</h5>
+              <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
+            </div>
+            <div>
+              <h5>Series Setting</h5>
+              <LabeledPicker
+                title="Expand Tones"
+                min={1}
+                max={5}
+                step={1}
+                value={tones}
+                onChange={setTones}
+              />
+              <LabeledPicker
+                title="Tone Step"
+                min={5}
+                max={50}
+                step={1}
+                unit="%"
+                value={steps}
+                onChange={setSteps}
+              />
+            </div>
+            <div className={styles.mode_navigation}>
+              <h5>Color selection method</h5>
+              <VSegmentedControl
+                onChange={setSelectedMode}
+                options={[
+                  { label: 'Complementary', value: 'complementary' },
+                  { label: 'Analogous', value: 'analogous' },
+                  { label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
+                  { label: 'Triadic', value: 'triadic' },
+                  { label: 'Split Complementary', value: 'split_complementary' },
+                  { label: 'Tetradic', value: 'tetradic' },
+                  { label: 'Flip Tetradic', value: 'flip_tetradic' },
+                  { label: 'Square', value: 'square' },
+                ]}
+              />
+            </div>
+          </aside>
+          <div className={styles.wheel_side}>
+            <ColorWheel
+              originColor={selectedColor}
+              highlightMode={selectedMode}
+              tones={tones}
+              step={steps}
             />
           </div>
-          <div className={styles.mode_navigation}>
-            <h5>Color selection method</h5>
-            <VSegmentedControl
-              onChange={setSelectedMode}
-              options={[
-                { label: 'Complementary', value: 'complementary' },
-                { label: 'Analogous', value: 'analogous' },
-                { label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
-                { label: 'Triadic', value: 'triadic' },
-                { label: 'Split Complementary', value: 'split_complementary' },
-                { label: 'Tetradic', value: 'tetradic' },
-                { label: 'Flip Tetradic', value: 'flip_tetradic' },
-                { label: 'Square', value: 'square' },
-              ]}
-            />
-          </div>
-        </aside>
-        <div className={styles.wheel_side}>
-          <ColorWheel
-            originColor={selectedColor}
-            highlightMode={selectedMode}
-            tones={tones}
-            step={steps}
-          />
-        </div>
-      </section>
+        </section>
+      </ScrollArea>
     </div>
   );
 }