调整选色色轮居中放置。

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;

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}`}

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

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;