From ed541cb05f776cb3d0c000ce1c6f1f59170e96d7 Mon Sep 17 00:00:00 2001 From: Florent Tapponnier Date: Fri, 17 Jul 2026 18:16:21 +0200 Subject: [PATCH] share-card: snapshot cap drops to 6 when title wraps (rpc-capabilities legend was still bleeding into footer) --- src/app/benchmarks/[slug]/share-card/route.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/benchmarks/[slug]/share-card/route.tsx b/src/app/benchmarks/[slug]/share-card/route.tsx index d9cbac8d..d15275cb 100644 --- a/src/app/benchmarks/[slug]/share-card/route.tsx +++ b/src/app/benchmarks/[slug]/share-card/route.tsx @@ -980,10 +980,14 @@ async function renderSnapshot( colors: Map, chainLabel?: string | null ) { - // Cap to top 8 to keep legend on a single wrap row and chart - // readable. Beyond 8 lines the polylines pile up illegibly and the - // legend overflows the footer. - const sorted = sortByP50(benchmark).slice(0, 8); + // Cap dynamically by title length: long titles (>=90 chars, 2 lines) + // eat the vertical space that would otherwise fit the 2nd legend row, + // so shrink the cohort further to keep the legend from overlapping + // the footer. Values chosen from empirical layout tests on + // rpc-capabilities (106 chars, 13 providers) and oracle-deviation + // (60 chars, 10 providers). + const cap = benchmark.title.length >= 90 ? 6 : 8; + const sorted = sortByP50(benchmark).slice(0, cap); const seriesList = sorted .map((r) => ({ slug: r.slug,