fix(money): uniform onboarding card image padding (MUSD-889)#31020
Conversation
The onboarding StepperCard rendered its image inside a fixed-height box (`px-4 pt-4 h-[215px]`) with `resizeMode="contain"`, which letterboxed the 16:9 artwork and left the top padding visibly larger than the 16px sides. Size the media box to the image's intrinsic aspect ratio so it hugs the artwork, with a uniform 16px (`p-4`) padding on every side. The artwork itself is unchanged.
|
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. |
Passing `aspectRatio` to the image through `tw.style(...)` did not take
effect, so the image fell back to its intrinsic size and overflowed the
card. Wrap the image in a `View` sized with a `{ width: '100%',
aspectRatio }` style and let the image fill it — the standard RN
responsive-image pattern. Padding stays a uniform 16px and the artwork
renders at its natural size.
The card art is 16:9, so resolving the asset dimensions at runtime was unnecessary. Replace it with a fixed `aspectRatio: 16 / 9` on the image wrapper. Same uniform-padding behaviour, less logic.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ 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 acee674. Configure here.
Use a `w-full aspect-video` Box for the image instead of a View with an inline aspectRatio style — same 16:9 sizing and uniform 16px padding, fewer moving parts. Drop the unit test that asserted the old inline style (the sizing is now pure twClassName styling).
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #31020 +/- ##
==========================================
- Coverage 82.84% 82.84% -0.01%
==========================================
Files 5574 5574
Lines 143862 143895 +33
Branches 33407 33413 +6
==========================================
+ Hits 119187 119203 +16
- Misses 16687 16702 +15
- Partials 7988 7990 +2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
This component is only imported by Since this only affects the Money/Card onboarding UI, Performance Test Selection: |
Description
On the Money home screen the onboarding card's image had more padding on top than on its sides. The
StepperCardrendered the image in a fixed-height box (px-4 pt-4 h-[215px]) withresizeMode="contain", so the 16:9 artwork was letterboxed inside the 215px area and the top gap ended up larger than the 16px left/right padding.This replaces the fixed height with a 16:9 (
aspect-video) frame and applies a uniformp-4(16px) padding on every side, so the spacing around the image is consistent. The artwork itself is unchanged.StepperCardis only consumed by the Money onboarding card, so the change is scoped to that surface.Figma link: https://www.figma.com/design/XKZ8hRqSn2iTiuzmlQLuYQ/Money-account?node-id=8027-14779&m=dev
Changelog
CHANGELOG entry: null
Related issues
Fixes: MUSD-889
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Performance checks (if applicable)
trace()for usage andaddTokenfor an exampleFor performance guidelines and tooling, see the Performance Guide.
Pre-merge reviewer checklist
Note
Low Risk
Presentational layout-only change in a single shared card component used for Money onboarding; no auth, data, or business logic.
Overview
StepperCardimage layout is updated so the step image uses uniform 16px padding on all sides and a 16:9 (aspect-video) frame instead of a fixed 215px height with asymmetricpx-4/pt-4.That removes extra top letterboxing from
resizeMode="contain"inside the old box, which showed up on the Money onboarding card as uneven spacing above the artwork. Copy, CTAs, and step logic are unchanged; only the image container structure and Tailwind classes differ.Reviewed by Cursor Bugbot for commit c4761aa. Bugbot is set up for automated code reviews on this repo. Configure here.