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

@@ -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) => {
+      {slides
-        const active = index === activeIndex;
+        .slice(dotWindowStart, dotWindowStart + maxDots)
-        return (
+        .map((slide, offset) => {
-          <button
+          const index = dotWindowStart + offset;
-            key={slide.id}
+          const active = index === activeIndex;
-            type="button"
+          return (
-            role="tab"
+            <button
-            aria-selected={active}
+              key={slide.id}
-            aria-label={`Go to slide ${index + 1}`}
+              type="button"
-            onClick={() => {
+              role="tab"
-              pauseAutoplay();
+              aria-selected={active}
-              setActiveIndex(index);
+              aria-label={`Go to slide ${index + 1}`}
-              goTo(index, "smooth");
+              onClick={() => {
-            }}
+                pauseAutoplay();
-            className={`h-1.5 rounded-full transition-all ${
+                setActiveIndex(index);
-              active
+                goTo(index, "smooth");
-                ? "w-6 bg-ark-gold"
+              }}
-                : "w-1.5 bg-[#7C7C7C] hover:bg-white/50"
+              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;