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,13 +277,28 @@ 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
+        .slice(dotWindowStart, dotWindowStart + maxDots)
+        .map((slide, offset) => {
+          const index = dotWindowStart + offset;
           const active = index === activeIndex;
           return (
             <button