Skip to content

Turn ContributionCard into a container to allow more fluid sizing#54

Merged
brdv merged 1 commit intomainfrom
feature/container-query-card
Mar 29, 2026
Merged

Turn ContributionCard into a container to allow more fluid sizing#54
brdv merged 1 commit intomainfrom
feature/container-query-card

Conversation

@MathijsR94
Copy link
Copy Markdown
Collaborator

Summary

  • Transform ContributionCard into a CSS container query component so the header layout adapts to the card's own width instead of the viewport
  • At narrow card widths (<320px), the header stacks vertically
  • At medium widths (320–399px), the "contributions" label is hidden, showing only the number to save space

Test plan

  • Resize the browser with 1 user loaded (full-width card) — header stays horizontal
  • Load 3–4 users so cards become narrow — verify header stacks/truncates gracefully

@MathijsR94 MathijsR94 requested a review from brdv March 29, 2026 14:39
@MathijsR94 MathijsR94 added the ui & polish Visual refinements and animations label Mar 29, 2026
Copy link
Copy Markdown
Collaborator

@brdv brdv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Smoooooth

@brdv brdv force-pushed the feature/container-query-card branch from 2b5941b to c224587 Compare March 29, 2026 15:16
@brdv brdv merged commit 78ac6b8 into main Mar 29, 2026
1 check passed
@brdv brdv deleted the feature/container-query-card branch March 29, 2026 15:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui & polish Visual refinements and animations

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants