fix: cap banners shown to 10 with a single-row dot indicator

The banners API can return hundreds of records; show at most 10 so the carousel
and its dot indicator stay on one row within the phone width, regardless of how
many exist on the backend.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/FigmaBanner.tsx

@@ -40,6 +40,8 @@ type BannerApiResponse = {
 
 const AUTOPLAY_MS = 3000;
 const RESUME_AFTER_INTERACTION_MS = 8000;
+// Product rule: show at most 10 banners, so the dot row always fits one line.
+const MAX_BANNERS = 10;
 const publicMenuOpenChangeEvent = "ark:public-menu-open-change";
 
 function bannerLangParam(lang: Lang): string {
@@ -82,6 +84,7 @@ function toSlides(items: BannerApiItem[]): BannerSlide[] {
   return [...items]
     .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
     .filter((item) => item.imageUrl)
+    .slice(0, MAX_BANNERS)
     .map((item) => {
       const imageUrl = assetUrl(item.imageUrl);
       return {
@@ -292,12 +295,11 @@ export function FigmaBanner() {
 
   if (slides.length === 0) return null;
 
-  // Show every slide's dot. The row stays within the screen width and wraps to
-  // a second row (and beyond if needed) instead of overflowing horizontally.
+  // At most MAX_BANNERS slides, so the dots always fit on a single centered row.
   const pagination = hasMultiple ? (
     <div className="px-4">
       <div
-        className="mx-auto flex max-w-full flex-wrap items-center justify-center gap-1.5 md:gap-2"
+        className="mx-auto flex max-w-full items-center justify-center gap-1.5 md:gap-2"
         role="tablist"
         aria-label="Banner pagination"
       >