[$125] Spacing issue on personal card details page

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Needs Reproduction (Reproduction blocked)
Reproducible in production?: Needs reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @joekaufmanexpensify
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Connect a personal card in NewDot.
2. Set the app to Spanish.
3. Go to card details on wallet.

Expected Result:

There is sufficient space between label name and the toggle for whether transactions are reimbursable, like there is for English.
Should have a 12px gap between the label and the toggle.

Actual Result:

The label name almost touches the description when the app is in Spanish

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @truph01

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022045233917385376282
• Upwork Job ID: 2045233917385376282
• Last Price Increase: 2026-04-17

[MelvinBot]

Proposal

What is the root cause of that problem?

In ToggleSettingsOptionRow.tsx:239, when shouldPlaceSubtitleBelowSwitch is true, the title+switch row is given a fixed height of 40px (styles.h10):

<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, shouldPlaceSubtitleBelowSwitch && styles.h10]}>

When the title text is longer (e.g. in Spanish: "Marcar transacciones como reembolsables"), it wraps but the row height stays fixed at 40px, causing the text to overflow visually into the subtitle area below.

The subtitle itself only has a 4px top margin (styles.mt1) at line 165, which is insufficient spacing — the issue expects 12px.

What changes do you think we should make in order to solve the problem?

In ToggleSettingsOptionRow.tsx:

1. Remove the fixed h10 height from the title row (line 239) so it grows naturally when text wraps. Use styles.mh10 (minHeight: 40) instead to preserve the minimum height for short text while allowing expansion.
2. Increase the subtitle margin from styles.mt1 (4px) to styles.mt3 (12px) when shouldPlaceSubtitleBelowSwitch is true (line 165), matching the expected 12px gap.

What alternative solutions did you explore? (Optional)

• Applying the fix only in PersonalCardDetailsHeaderMenu.tsx via subtitleStyle — rejected because the fixed-height overflow is a general issue in ToggleSettingsOptionRow that would affect any long translated title across the 30+ usages of this component.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @truph01 (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022045233917385376282

[JustDreameritis]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On the personal card details page, when the app is set to Spanish, the "Mark transactions as reimbursable" toggle label text nearly touches the subtitle description below it because there's insufficient spacing and the container has a fixed height that doesn't accommodate wrapped text.

What is the root cause of that problem?

The title+switch row in ToggleSettingsOptionRow.tsx uses a fixed height of 40px (styles.h10) when shouldPlaceSubtitleBelowSwitch is true at line 239. When the title wraps to multiple lines (common in longer translations like Spanish), the text overflows this fixed container and visually collides with the subtitle. Additionally, the subtitle only has styles.mt1 (4px) margin at line 165, whereas the expected gap is 12px.

What changes do you think we should make in order to solve the problem?

Both fixes are in ToggleSettingsOptionRow.tsx — a single-file fix:

1. Replace styles.h10 with styles.mnh10 (or equivalent {minHeight: 40}) on line 239 so the row expands naturally when title text wraps, while preserving the minimum height for short single-line titles.

2. Change styles.mt1 to styles.mt3 (12px) for the subtitle margin when shouldPlaceSubtitleBelowSwitch is true, on both line 152 and line 165, to provide the expected 12px gap.

// Line 239: allow row to grow with wrapped text
<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, shouldPlaceSubtitleBelowSwitch && {minHeight: 40}]}>

// Lines 152, 165: increase gap to 12px
shouldPlaceSubtitleBelowSwitch ? styles.mt3 : {...styles.mt1, ...styles.mr5}

This approach fixes the issue generically for all 30+ usages of ToggleSettingsOptionRow across the app, not just the personal card details page, so any other long translated titles will also benefit.

What alternative solutions did you explore? (Optional)

Considered passing a custom subtitleStyle from PersonalCardDetailsHeaderMenu.tsx to override the margin for just this one caller, but that doesn't fix the fixed-height overflow issue which is the primary cause and would leave other consumers vulnerable to the same bug with long translations.

[samranahm]

Proposal

What is the root cause of that problem?

The title and switch row in ToggleSettingsOptionRow has a fixed height of 40px. When the title is long local, but the row can't grow. Also, the title text has no right margin, so it touches/overlaps the switch. The subtitle gap is only 4px (mt1) instead of the expected 12px.

What changes do you think we should make in order to solve the problem?

We should

1. Remove shouldPlaceSubtitleBelowSwitch && styles.h10 from the title and switch row and let it grow when text wraps to two lines.
2. Add styles.mr3 to the title container to adds a 12px gap so title text doesn't touch or overlap the switch.

<View style={[styles.flexColumn, styles.flex1, styles.mr3]}>

App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

Lines 197 to 198 in 4cc4dcf

	{customTitle ?? (
	<View style={[styles.flexColumn, styles.flex1]}>

3. Change styles.mt1 to styles.mt3 on the subtitle to increases the gap between title row and subtitle from 4px to 12px.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @samranahm Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[JasimMalook]

Proposal

Please re-state the problem that we are trying to solve in this issue.
On the personal card details page, when the app language is set to Spanish, the toggle label text becomes longer and wraps into multiple lines. Due to insufficient spacing and a fixed container height, the label visually collides with the subtitle, instead of maintaining the expected 12px gap.

What is the root cause of that problem?
The issue comes from two combined layout constraints in ToggleSettingsOptionRow.tsx:

The title + toggle row uses a fixed height (styles.h10, i.e. 40px) when shouldPlaceSubtitleBelowSwitch is true.
This prevents the container from expanding when the label wraps (which happens in longer translations like Spanish).
As a result, the text overflows into the subtitle area.
The subtitle spacing uses a small margin (styles.mt1, 4px), which is below the expected 12px spacing.
Even without overflow, this creates a visually cramped layout.

What changes do you think we should make in order to solve the problem?

Apply a responsive layout fix directly in ToggleSettingsOptionRow.tsx:

Replace fixed height with flexible height
Change styles.h10 → minHeight: 40 (or styles.mh10 if available)
This allows the row to expand naturally when text wraps while preserving minimum spacing for short labels.
<View
style={[
styles.flexRow,
styles.alignItemsCenter,
styles.justifyContentBetween,
shouldPlaceSubtitleBelowSwitch && {minHeight: 40},
]}

Increase subtitle spacing to match design expectation
Replace styles.mt1 (4px) → styles.mt3 (12px) when shouldPlaceSubtitleBelowSwitch is true.
shouldPlaceSubtitleBelowSwitch
? styles.mt3
: {...styles.mt1, ...styles.mr5}

Why this approach?

Fixes both overflow and spacing issues together
Works for all translations (not just Spanish)
Improves behavior across all usages of ToggleSettingsOptionRow
Keeps layout consistent with design expectations (12px spacing)

What alternative solutions did you explore? (Optional)

Adjusting spacing only in the personal card page was rejected because it wouldn’t solve the root issue in the shared component.
Keeping fixed height and truncating text was also avoided, as it harms accessibility and localization support.

Contributor details
Email: jasimmalook@gmail.com
Upwork Profile: https://www.upwork.com/freelancers/~014c25762fc2275193