Skip to content

share-card: scale title font by length (fix overflow on long titles) - #1275

Merged
Flotapponnier merged 1 commit into
devfrom
fix/share-card-title-length
Jul 17, 2026
Merged

share-card: scale title font by length (fix overflow on long titles)#1275
Flotapponnier merged 1 commit into
devfrom
fix/share-card-title-length

Conversation

@Flotapponnier

Copy link
Copy Markdown
Collaborator

Long bench titles (rpc-capabilities: 101 chars) at fontSize=48-50 wrap to 4 lines and overlap the leaderboard/chart underneath. Adds scaledTitleSize(base, title) helper with a linear ramp: <=60 chars stays at base, >100 chars shrinks to 50%. Applied to ranking / leaderboard / snapshot / compare. Headline untouched (title font already 18px).

…itles)

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant