From fbb9d21f24aa7e82bf1047cbb7fb3c4cec370cb8 Mon Sep 17 00:00:00 2001 From: TerryM Date: Tue, 2 Jun 2026 11:16:49 +0800 Subject: [PATCH] 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) --- src/components/FigmaBanner.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/FigmaBanner.tsx b/src/components/FigmaBanner.tsx index 64e3921..e769f3c 100644 --- a/src/components/FigmaBanner.tsx +++ b/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 ? (