Skip to content

PM-5401: Keep member stats text readable with TCO banner#1967

Merged
jmgasper merged 1 commit into
devfrom
PM-5401
Jun 18, 2026
Merged

PM-5401: Keep member stats text readable with TCO banner#1967
jmgasper merged 1 commit into
devfrom
PM-5401

Conversation

@jmgasper

Copy link
Copy Markdown
Collaborator

What was broken
Member stats reused the same narrow-card breakpoint for both the one-column layout and compact mobile typography. When the TCO trip-winner banner made the stats card narrow on desktop, the card switched to noticeably smaller text.

Root cause
The compact typography rules were tied to the 520px layout breakpoint instead of a narrower phone-width breakpoint.

What was changed
Moved the compact member-stats typography, icon, and padding container query from 520px to 420px. The stats list can still switch to one column at 520px, but desktop-sized text remains at the side-by-side TCO card width.

Any added/updated tests
No tests were added because this is a CSS container-query adjustment and the repo has no browser visual test harness for this card.

Validation

  • yarn test:no-watch --runInBand src/apps/profiles/src passed.
  • yarn test:no-watch --runInBand src/apps/profiles/src/components/tc-achievements/MemberStatsBlock/MemberStatsBlock.spec.tsx passed.
  • yarn lint passed.
  • yarn run build passed with existing CSS-order and bundle-size warnings.
  • yarn test:no-watch --runInBand was run and failed in unrelated work, engagements, and wallet suites on existing baseline issues.

What was broken
Member stats reused the same narrow-card breakpoint for both the one-column layout and compact mobile typography. When the TCO trip-winner banner made the stats card narrow on desktop, the card switched to noticeably smaller text.

Root cause
The compact typography rules were tied to the 520px layout breakpoint instead of a narrower phone-width breakpoint.

What was changed
Moved the compact member-stats typography, icon, and padding container query from 520px to 420px. The stats list can still switch to one column at 520px, but desktop-sized text remains at the side-by-side TCO card width.

Any added/updated tests
No tests were added because this is a CSS container-query adjustment and the repo has no browser visual test harness for this card. Validated the affected profiles tests, lint, and production build. The full repo non-watch test command was also run and failed in unrelated work, engagements, and wallet suites on existing baseline issues.
@jmgasper jmgasper requested a review from kkartunov as a code owner June 18, 2026 23:34
@jmgasper jmgasper merged commit 61adeec into dev Jun 18, 2026
6 of 7 checks passed
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