Skip to content

share-card leaderboard: dense scaling (fix title/rows overlap) - #1316

Merged
Flotapponnier merged 1 commit into
mainfrom
fix/share-card-leaderboard-dense
Jul 22, 2026
Merged

share-card leaderboard: dense scaling (fix title/rows overlap)#1316
Flotapponnier merged 1 commit into
mainfrom
fix/share-card-leaderboard-dense

Conversation

@Flotapponnier

Copy link
Copy Markdown
Collaborator

50pt title wraps to 2 lines when >55 chars (weekend-drift 72), overlapping the 11-row list on the 630px canvas.

Add same dense/veryDense responsive sizing as renderRanking:

  • title 50 → 40 (dense) → 32 (veryDense)
  • name/value/rank fonts scale down
  • row gap 14 → 10 → 8
  • rows anchored flex-start (was center)

Standard case (<=7 providers + short title) unchanged.

Fixed 50pt title collapsed into 2 lines for long titles (weekend-drift 72 chars) and combined with 11 rows, the title overlapped the top of the row list on the 630px canvas.

Adds the same dense/veryDense responsive sizing as renderRanking:
- title 50 -> 40 (dense: count>=8 or title>55) or 32 (veryDense: count>=10 or title>70)
- value/name/rank fonts scale down proportionally
- row gap 14 -> 10 -> 8
- bar height 8 -> 7 -> 6
- logo size 28 -> 24 -> 22
- rows anchored flex-start (was center) so tall title never pushes them off canvas

Standard case (<=7 providers + short title) is unchanged.
@Flotapponnier
Flotapponnier merged commit 53071f7 into main Jul 22, 2026
1 check failed
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