Skip to content

chore: align carousel card heights for accessibility cp-7.78.0#30201

Merged
zone-live merged 3 commits into
mainfrom
TSA-fix-ui-zoom-accessibility
May 14, 2026
Merged

chore: align carousel card heights for accessibility cp-7.78.0#30201
zone-live merged 3 commits into
mainfrom
TSA-fix-ui-zoom-accessibility

Conversation

@zone-live

@zone-live zone-live commented May 14, 2026

Copy link
Copy Markdown
Contributor

Description

Use fluid heights on cards so large system text doesn’t clip.

Problem before: fixed heights + large accessibility text scaling = content clipping inside cards.
Now: cards and skeletons are fully fluid (no height prop needed). Only ViewMoreCard keeps a height, and only as a min-h directly inline in WhatsHappeningSection, so it sits at the same height as a typical card at normal font scale.

How it looks now with huge font:

Simulator Screenshot - iPhone 17 Pro - 2026-05-14 at 18 39 46

And normal/default font size:
Simulator Screenshot - iPhone 17 Pro - 2026-05-14 at 18 50 02

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Low risk UI/layout change to remove fixed card heights; main risk is minor visual regression in carousel alignment across devices/font scales.

Overview
Makes the What’s Happening carousel cards and loading skeletons fluid-height by removing the fixed Tailwind height prop (twHeightClassName) from WhatsHappeningCard and WhatsHappeningCardSkeleton, preventing content clipping with large accessibility text.

Keeps the “View more” tile visually aligned by switching it to a min-h-[230px] constraint, and updates the skeleton test to assert the expected 2-line title and 3-line description placeholder configuration.

Reviewed by Cursor Bugbot for commit 00186c9. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbotv2 metamaskbotv2 Bot added the team-social-ai Social & AI team label May 14, 2026

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit da18d8b. Configure here.

Comment thread app/components/UI/WhatsHappening/components/WhatsHappeningCard.tsx Outdated
Comment thread app/components/UI/WhatsHappening/components/WhatsHappeningCard.tsx
@zone-live zone-live enabled auto-merge May 14, 2026 18:25

@Bigshmow Bigshmow left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM!

@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeWalletPlatform
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 88%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are purely cosmetic UI modifications to the WhatsHappening feature (a content/news carousel in the wallet's Trending/Homepage area):

  1. WhatsHappeningCardSkeleton.tsx: Removed the optional twHeightClassName prop - skeleton cards no longer accept an external height class, using natural height instead.
  2. WhatsHappeningCard.tsx: Removed the optional twHeightClassName prop, changed card layout from fixed height with justify-between to natural height with mt-3 margin on the bottom row.
  3. WhatsHappeningSection.tsx: Updated to stop passing twHeightClassName to cards/skeletons; changed ViewMoreCard from h-[230px] (fixed height) to min-h-[230px] (minimum height).
  4. WhatsHappeningCardSkeleton.test.tsx: New unit test for the skeleton component.

These changes affect only the visual layout of the WhatsHappening carousel section, which is part of the Trending discovery tab covered by SmokeWalletPlatform. No logic, navigation, controller, or shared infrastructure changes were made. The risk is low - only the card height behavior changes (from fixed to natural/minimum height). SmokeWalletPlatform is the appropriate tag as it covers the Trending discovery tab where WhatsHappening is displayed.

Performance Test Selection:
The changes are minor CSS/layout adjustments (removing fixed height constraints, using natural height). While this touches UI rendering, the changes are too minor and isolated to warrant performance testing. No data loading, state management, or critical user flow changes were made.

View GitHub Actions results

@sonarqubecloud

Copy link
Copy Markdown

@github-actions

Copy link
Copy Markdown
Contributor

⚠️ E2E Fixture Validation — Structural changes detected

Category Count
New keys 0
Missing keys 15
Type mismatches 0
Value mismatches 12 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report

@zone-live zone-live added this pull request to the merge queue May 14, 2026
Merged via the queue into main with commit a55aeb3 May 14, 2026
163 of 169 checks passed
@zone-live zone-live deleted the TSA-fix-ui-zoom-accessibility branch May 14, 2026 20:15
@github-actions github-actions Bot locked and limited conversation to collaborators May 14, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.79.0 Issue or pull request that will be included in release 7.79.0 label May 14, 2026
@zone-live zone-live changed the title chore: align carousel card heights for accessibility chore: align carousel card heights for accessibility cp-7.78.0 May 15, 2026
@zone-live zone-live added release-7.78.0 Issue or pull request that will be included in release 7.78.0 release-7.79.0 Issue or pull request that will be included in release 7.79.0 and removed release-7.79.0 Issue or pull request that will be included in release 7.79.0 labels May 15, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.78.0 Issue or pull request that will be included in release 7.78.0 release-7.79.0 Issue or pull request that will be included in release 7.79.0 size-S team-social-ai Social & AI team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants