From 7dda61159b78a7b85c16bdd29f5c0822d0f14f54 Mon Sep 17 00:00:00 2001
From: pkong-ds <pkong.work@gmail.com>
Date: Tue, 28 May 2024 07:37:51 +0800
Subject: [PATCH] Separate color picker as 2 components

---
 src/pages/model/[model]/color/[color].astro | 38 +++++++++++----------
 src/styles/upload.css                       | 14 +++++---
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro
index 15b7dbd..21f4b52 100644
--- a/src/pages/model/[model]/color/[color].astro
+++ b/src/pages/model/[model]/color/[color].astro
@@ -147,24 +147,26 @@ if (deviceDetail == null) {
         <div class="color-section">
           <h3 class="color-section__heading">COLOR</h3>
           <p class="color-section__description">{deviceDetail.color.name}</p>
-          <ul class="color-picker">
-            {
-              sameModelDevices.map((d) => (
-                <li class="color-picker-item-container">
-                  <a
-                    href={`/model/${targetModel}/color/${d.color.id}`}
-                    style={{ backgroundColor: d.color.hexcode }}
-                    class={`color-picker-item ${
-                      d.color.id === targetColor
-                        ? "color-picker-item--selected"
-                        : ""
-                    }`}
-                    data-tippy-content={d.color.name}
-                  />
-                </li>
-              ))
-            }
-          </ul>
+          <div class="color-picker-scrollable">
+            <ul class="color-picker">
+              {
+                sameModelDevices.map((d) => (
+                  <li class="color-picker-item-container">
+                    <a
+                      href={`/model/${targetModel}/color/${d.color.id}`}
+                      style={{ backgroundColor: d.color.hexcode }}
+                      class={`color-picker-item ${
+                        d.color.id === targetColor
+                          ? "color-picker-item--selected"
+                          : ""
+                      }`}
+                      data-tippy-content={d.color.name}
+                    />
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
         </div>
         <button disabled class="generate-btn">Generate product mockups</button>
         <button style="display:none" class="start-mockup-btn"
diff --git a/src/styles/upload.css b/src/styles/upload.css
index 05ec497..730a2ec 100644
--- a/src/styles/upload.css
+++ b/src/styles/upload.css
@@ -387,17 +387,21 @@ main {
   background-image: url("/Images/droplet.svg");
 }
 
+.color-picker-scrollable {
+  margin: 0 0 8px 0;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 .color-picker {
   list-style: none;
   display: flex;
   padding: 12px 0;
   align-items: center;
-  margin: 0 0 8px 0;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+  margin: 0;
   justify-content: center;
+  width: max-content;
 }
 
 .color-picker-item {