From d3e562663d973588f777274c0d6f998388337213 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 2 Jun 2026 11:01:15 +0800
Subject: [PATCH] fix: cap banner dot indicator at 10 to avoid mobile overflow

With many banners the pagination dots overflowed the phone width. Show at most
10 dots in a window that follows the active slide; each dot still maps to its
real slide index.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/FigmaBanner.tsx | 61 +++++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/components/FigmaBanner.tsx b/src/components/FigmaBanner.tsx
index cf4669b..2cecf88 100644
--- a/src/components/FigmaBanner.tsx
+++ b/src/components/FigmaBanner.tsx
@@ -277,34 +277,49 @@ export function FigmaBanner() {
 
   if (slides.length === 0) return null;
 
+  // Cap the dot indicator at 10 so a long banner list never overflows the phone
+  // width. With more slides we show a 10-dot window that follows the active
+  // slide; each dot still maps to its real slide index.
+  const maxDots = 10;
+  const dotWindowStart =
+    slides.length <= maxDots
+      ? 0
+      : Math.min(
+          Math.max(activeIndex - Math.floor(maxDots / 2), 0),
+          slides.length - maxDots,
+        );
+
   const pagination = hasMultiple ? (
     <div
-      className="flex items-center justify-center gap-1.5 md:gap-2"
+      className="flex max-w-full items-center justify-center gap-1.5 md:gap-2"
       role="tablist"
       aria-label="Banner pagination"
     >
-      {slides.map((slide, index) => {
-        const active = index === activeIndex;
-        return (
-          <button
-            key={slide.id}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            aria-label={`Go to slide ${index + 1}`}
-            onClick={() => {
-              pauseAutoplay();
-              setActiveIndex(index);
-              goTo(index, "smooth");
-            }}
-            className={`h-1.5 rounded-full transition-all ${
-              active
-                ? "w-6 bg-ark-gold"
-                : "w-1.5 bg-[#7C7C7C] hover:bg-white/50"
-            }`}
-          />
-        );
-      })}
+      {slides
+        .slice(dotWindowStart, dotWindowStart + maxDots)
+        .map((slide, offset) => {
+          const index = dotWindowStart + offset;
+          const active = index === activeIndex;
+          return (
+            <button
+              key={slide.id}
+              type="button"
+              role="tab"
+              aria-selected={active}
+              aria-label={`Go to slide ${index + 1}`}
+              onClick={() => {
+                pauseAutoplay();
+                setActiveIndex(index);
+                goTo(index, "smooth");
+              }}
+              className={`h-1.5 rounded-full transition-all ${
+                active
+                  ? "w-6 bg-ark-gold"
+                  : "w-1.5 bg-[#7C7C7C] hover:bg-white/50"
+              }`}
+            />
+          );
+        })}
     </div>
   ) : null;