fix(rn): card header subtitle wraps correctly, footer buttons stay within bounds

[rohitr-raz]

Summary

• Remove flex={1} from inner row in CardHeaderLeading and add flexShrink={1} to text container — fixes subtitle text clipping through the divider on React Native
• Replace flexGrow={1} with flex={1} and gap="spacing.5" on CardFooterTrailing row — fixes Reset/Save Details buttons overflowing the right edge of the card on React Native

##Description
Before:

After:

Test plan

• Verify CardHeader subtitle wraps fully above the divider on a physical Android/iOS device
• Verify CardFooter Reset and Save Details buttons are both visible within card bounds on mobile
• Verify no regression on web (layout unchanged)

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: cc79c4f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@razorpay/blade	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

✅ PR title follows Conventional Commits specification.

[rzp-slash-public]

PR Description

Fix React Native card layout so header subtitle wraps correctly and footer buttons stay within card bounds.

Description of Changes

• Remove flex={1} from inner row in CardHeaderLeading in packages/blade/src/components/Card/CardHeader.tsx
• Add flexShrink={1} to outer column container in CardHeaderLeading to prevent subtitle clipping
• Add flexShrink={1} to text wrapper BaseBox in CardHeaderLeading for proper text wrapping
• Replace flexGrow={1} with flex={1} on both action containers in packages/blade/src/components/Card/CardFooter.tsx
• Add gap="spacing.5" to the footer trailing row, replacing the empty spacer BaseBox
• Add width={isMobile ? '100%' : undefined} to footer trailing row to constrain buttons on mobile

Note for Reviewer

Changes are React Native layout fixes only. Web layout should be unaffected since flexGrow vs flex behaves identically on web, and the width: 100% is conditionally applied only on mobile. The empty spacer BaseBox with marginLeft is replaced by gap — verify this doesn't cause subtle spacing differences on web.

Review Effort

3

Flow Diagram

Not applicable

---

Generated by Slash Reviewer

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cc79c4f:

Sandbox	Source
razorpay/blade: basic	Configuration

[rzp-slash-public]

AI Code Review

No issues found in this PR.

[rzp-slash-public]

PR Risk Assessment: 🟢 LOW

Rule Source: standard_rules
Confidence: 87%

Reasoning

This PR fixes two React Native layout bugs in the Card component: (1) removing flex={1} from the inner row in CardHeaderLeading and adding flexShrink={1} to the outer container and text box to prevent subtitle text from clipping through the divider, and (2) replacing a manual spacer BaseBox with gap='spacing.5', changing flexGrow={1} to flex={1}, and adding width={isMobile ? '100%' : undefined} in CardFooterTrailing to keep buttons within card bounds on mobile. Applying generic risk indicators, this is a bug fix in a UI design system component with no API surface changes, no auth/payment/data logic involved, and no exported prop or function signatures altered; the isMobile guard explicitly protects most changes from affecting web layout, and the gap replacing the explicit spacer box produces equivalent visual spacing on web. The only minor concern is the flexGrow → flex shorthand switch which could subtly change flex-basis on web (auto vs 0%), but both result in equal-width button containers in practice, keeping this firmly in the low-risk category.

---

🔍 Pre-Mortem Analysis

Categories Checked:

• ✅ Unit Tests
• ✅ Monitoring Logging

Issues by Severity:

• 📋 Medium (importance 5-6): 1 issues

Files Affected:

• packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap (1 issues)

Analysis Summary:

• Total Checks Run: 9 out of 181 available
• Issues Found: 1
• Checks Passed: 8
• Analysis Time: 135.5s

---

Sub-Agent Attribution

Sub-Agent	Suggestions	Skills Used
pre_mortem	1	pre-mortem

---

ℹ️ Auto-Approval Unavailable — This repository does not have a risk-assessment skill installed. Low-risk PRs like this one require the skill for auto-approval.
How to set up review skills →

---

Assessed by Slash Reviewer

[saurabhdaware]

.

[saurabhdaware]

Seems to add line break on web

Expected on web:

[rohitr-raz]

Seems to add line break on web

Expected on web:

added as isReactNative() gate and it seems to working fine now
Native:

React:
Card example-

card body content-