From 4830115ac4ac17ca697e22acf984f51ba6403ed6 Mon Sep 17 00:00:00 2001 From: Florent Tapponnier Date: Fri, 17 Jul 2026 17:39:10 +0200 Subject: [PATCH] share-card: scale title font by length (fix layout overflow on long titles) Screenshot from user: rpc-capabilities leaderboard template renders the 101-char title 'Fastest free public RPC for Ethereum, BNB, Polygon and 23 more chains (plus Solana and Polkadot)' at fontSize=50 which wraps to 4 lines and overlaps the leaderboard rows underneath. Same crash on snapshot (fontSize=48 title overflows into the time-series chart). Fix: scaledTitleSize(base, title) helper ramps font size down for long titles. <=60 chars stays at base, >100 chars shrinks to 50% base. Keeps short titles at the original design size and only touches long ones. Applied to 4 templates: ranking 44/56 base leaderboard 50 base snapshot 48 base compare 36 base Headline stays untouched (title font is already 18 px because the template features the winner's big number, not the bench title). No layout math change, no CSS variable, no schema change. Just the one font-size call per template swapped for the helper. --- .../benchmarks/[slug]/share-card/route.tsx | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/app/benchmarks/[slug]/share-card/route.tsx b/src/app/benchmarks/[slug]/share-card/route.tsx index 719725ec..03fa36f7 100644 --- a/src/app/benchmarks/[slug]/share-card/route.tsx +++ b/src/app/benchmarks/[slug]/share-card/route.tsx @@ -53,6 +53,22 @@ function compactProviderName(name: string): string { return map[name] ?? name; } +/** Scale the title font size when the bench title is long so it stops + * overflowing the layout area on the share-card. Long titles like + * "Fastest free public RPC for Ethereum, BNB, Polygon and 23 more + * chains (plus Solana and Polkadot)" (105 chars) at the default 44-56 + * px wrap to 4 lines and collide with the leaderboard rows or the + * time-series chart on Snapshot. This linear ramp keeps titles under + * 60 chars at the caller's base size and shrinks longer ones on a + * predictable slope so the layout stays inside 630 px. */ +function scaledTitleSize(base: number, title: string): number { + const len = title.length; + if (len <= 60) return base; + if (len <= 80) return Math.round(base * 0.78); + if (len <= 100) return Math.round(base * 0.62); + return Math.round(base * 0.5); +} + /** Direction-aware comparison label for the Compare card centre cell. * delta = b - a, where a is the leader (rank 1). * - Latency / time benches: a is faster, b is "slower by". @@ -643,7 +659,7 @@ async function renderRanking( // Scale type sizes down when the bench has many providers, otherwise // the long names (StellarExpert, WalletExplorer, …) collide. const dense = count >= 7; - const titleSize = dense ? 44 : 56; + const titleSize = scaledTitleSize(dense ? 44 : 56, benchmark.title); const valueSize = dense ? 22 : 26; const nameSize = dense ? 15 : 18; const captionSize = dense ? 11 : 12; @@ -811,7 +827,7 @@ async function renderLeaderboard(