From c30148427be4266c3022b85e3f7e7e61b0aad584 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 09:47:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=80=89=E8=89=B2=E8=89=B2?=
 =?UTF-8?q?=E8=BD=AE=E5=B1=85=E4=B8=AD=E6=94=BE=E7=BD=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page-components/wheels/ColorColumn.module.css | 4 ++--
 src/page-components/wheels/ColorColumn.tsx        | 4 +++-
 src/page-components/wheels/ColorWheel.tsx         | 2 +-
 src/pages/Wheels.module.css                       | 1 +
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/page-components/wheels/ColorColumn.module.css b/src/page-components/wheels/ColorColumn.module.css
index c6059fe..2af3866 100644
--- a/src/page-components/wheels/ColorColumn.module.css
+++ b/src/page-components/wheels/ColorColumn.module.css
@@ -14,10 +14,10 @@
     clip-path: polygon(23.21% 0%, 50% 100%, 76.79% 0%);
     position: absolute;
     top: 0;
-    left: 0;
+    left: 50%;
     width: 15rem;
     aspect-ratio: 1 / 1;
-    transform-origin: center bottom;
+    transform-origin: 0 bottom;
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/src/page-components/wheels/ColorColumn.tsx b/src/page-components/wheels/ColorColumn.tsx
index cb1ac24..46824c4 100644
--- a/src/page-components/wheels/ColorColumn.tsx
+++ b/src/page-components/wheels/ColorColumn.tsx
@@ -42,7 +42,9 @@ export function ColorColumn({ actived, rotate, rootColor }: ColorWheelProps) {
   }, [rootColor]);
 
   return (
-    <div className={styles.color_column} style={{ transform: `rotate(${rotate}deg)` }}>
+    <div
+      className={styles.color_column}
+      style={{ transform: `rotate(${rotate}deg) translateX(-50%)` }}>
       {colorSeries.map((c, index) => (
         <ColorBlock
           key={`${c}-${index}`}
diff --git a/src/page-components/wheels/ColorWheel.tsx b/src/page-components/wheels/ColorWheel.tsx
index a5ec3d2..3efaaea 100644
--- a/src/page-components/wheels/ColorWheel.tsx
+++ b/src/page-components/wheels/ColorWheel.tsx
@@ -50,7 +50,7 @@ export function ColorWheel({
   return (
     <div className={styles.wheel_view}>
       <h5>Color Wheel</h5>
-      <div className={cx('center', styles.wheel_place)}>
+      <div className={cx(styles.wheel_place)}>
         <div className={styles.wheel_container}>
           {wheelColors.map(({ color, rotate }) => (
             <ColorColumn
diff --git a/src/pages/Wheels.module.css b/src/pages/Wheels.module.css
index 14780ad..a9e8576 100644
--- a/src/pages/Wheels.module.css
+++ b/src/pages/Wheels.module.css
@@ -9,6 +9,7 @@
     flex-direction: row;
     align-items: stretch;
     gap: var(--spacing-m);
+    overflow-y: auto;
   }
   .function_side {
     display: flex;