From 42f8f0fd01a2b823ee268c692926164cecae2818 Mon Sep 17 00:00:00 2001
From: xiaoxu <innocent0705@gmail.com>
Date: Mon, 16 Dec 2024 21:14:30 +0800
Subject: [PATCH 1/4] fix: adjust css style to fix only watch  4 cards

---
 components/Marathon/Mentors.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Marathon/Mentors.jsx b/components/Marathon/Mentors.jsx
index fdb18034..64d964bf 100644
--- a/components/Marathon/Mentors.jsx
+++ b/components/Marathon/Mentors.jsx
@@ -290,7 +290,7 @@ const Mentors = () => {
 
       <div
         ref={mentorsRef}
-        className="flex gap-4 mt-9 px-6 lg:pl-60 overflow-x-hidden select-none"
+        className="flex gap-4 mt-9 px-6 lg:pl-60 overflow-x-auto select-none"
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}

From 442643bceffdba4d58618b69aeb4bb2f7c96fe8d Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Mon, 16 Dec 2024 21:27:30 +0800
Subject: [PATCH 2/4] fix: safari scroll width bug

---
 components/Marathon/Mentors.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/Marathon/Mentors.jsx b/components/Marathon/Mentors.jsx
index fdb18034..14ed4eea 100644
--- a/components/Marathon/Mentors.jsx
+++ b/components/Marathon/Mentors.jsx
@@ -205,9 +205,12 @@ const Mentors = () => {
   const [touchStartX, setTouchStartX] = useState(null);
   const timer = useRef(null);
   const { translateX, isEnd } = useMemo(() => {
+    // 因為 Safari 使用父層的 scrollWidth 再搭配 transform 時，scrollWidth 會越變越小，所以改用計算寬度
+    // 計算 mentors 的寬度，包含了 gap 和 padding
+    const mentorsWidth = mentorsRef.current?.children?.[0]?.clientWidth * mentors.length + 16 * (mentors.length - 1) + 48;
     const currentTranslateX = currentMentor * 301;
-    if (window.innerWidth + currentTranslateX > mentorsRef.current?.scrollWidth) {
-      return { translateX: mentorsRef.current?.scrollWidth - window.innerWidth, isEnd: true };
+    if (window.innerWidth + currentTranslateX > mentorsWidth) {
+      return { translateX: mentorsWidth - window.innerWidth, isEnd: true };
     }
     return { translateX: currentTranslateX, isEnd: false };
   }, [currentMentor]);

From 2c4741508994517bbf40df3e8c383bea5c089e73 Mon Sep 17 00:00:00 2001
From: xiaoxu <innocent0705@gmail.com>
Date: Mon, 16 Dec 2024 21:29:02 +0800
Subject: [PATCH 3/4] fix:add cotent to intro for card  display error

---
 components/Marathon/Mentors.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/Marathon/Mentors.jsx b/components/Marathon/Mentors.jsx
index 64d964bf..f727ef4e 100644
--- a/components/Marathon/Mentors.jsx
+++ b/components/Marathon/Mentors.jsx
@@ -287,6 +287,11 @@ const Mentors = () => {
           </IconButton>
         </div>
       </div>
+      <div className="px-6 lg:px-60 mt-4 text-basic-500">
+        <p>
+          本次引導師皆有豐富的自主學習實踐與陪伴引導經驗，共六位：林怡廷（島島阿學發起人）、許明宏（島島阿學發起人）、謝佩君（Talent Lab-Learning Facilitator）、沈潔伃（魚水教育催化劑創辦人）、閉恩濡（實驗教育工作者）、楊逸帆（《學習的理由》紀錄片導演）。
+        </p>
+      </div>
 
       <div
         ref={mentorsRef}
@@ -319,6 +324,7 @@ const Mentors = () => {
         ))}
       </div>
 
+
       <Modal
         isOpen={isOpen}
         onClose={handleCloseModal}

From a10f00f36ff0a25ce3ccc0e5e14a9727ea223c0e Mon Sep 17 00:00:00 2001
From: xiaoxu <innocent0705@gmail.com>
Date: Mon, 16 Dec 2024 21:50:57 +0800
Subject: [PATCH 4/4] fix:adjust eslint error

---
 components/Marathon/Mentors.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Marathon/Mentors.jsx b/components/Marathon/Mentors.jsx
index e80f61a4..a05fa034 100644
--- a/components/Marathon/Mentors.jsx
+++ b/components/Marathon/Mentors.jsx
@@ -327,7 +327,6 @@ const Mentors = () => {
         ))}
       </div>
 
-
       <Modal
         isOpen={isOpen}
         onClose={handleCloseModal}