[Due for payment 2025-12-02][$100] Reports - Android - Misaligned spacing between “report” text and toggle

[nlemma]

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: 9.2.43-0-staging
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Samsung A15, Android 15.
App Component: Other

Action Performed:

1. Open Android app.
2. Navigate to workspaces
3. Create a workspace
4. Go to Reports

Expected Result:

The “report” text should be positioned with consistent spacing relative to the toggle, following the same layout as on iOS, Web, and mWeb.

Actual Result:

On Android, the “Report” text appears too close to the toggle button, with insufficient spacing.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6993300_1762224568769.issue.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021985668641506029272
• Upwork Job ID: 1985668641506029272
• Last Price Increase: 2025-12-05
• Automatic offers:
• daledah | Contributor | 109424697

Issue Owner

Current Issue Owner: @

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Proposal

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

On Android, the “Report” text appears too close to the toggle button, with insufficient spacing.

What is the root cause of that problem?

We are missing margin right here

App/src/pages/workspace/reports/WorkspaceReportsPage.tsx

Lines 222 to 230 in 995eec3

	<ToggleSettingOptionRow
	pendingAction={reportTitlePendingFields.deletable}
	title={translate('workspace.reports.preventMembersFromChangingCustomNamesTitle')}
	switchAccessibilityLabel={translate('workspace.reports.preventMembersFromChangingCustomNamesTitle')}
	wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt6]}
	titleStyle={styles.pv2}
	isActive={!policy?.fieldList?.[CONST.POLICY.FIELDS.FIELD_LIST_TITLE].deletable}
	onToggle={(isEnabled) => {
	if (isEnabled && !isControlPolicy(policy)) {

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

We should add margin right or padding right styles.pr5 like we did here for the titleStyle

    titleStyle={[styles.pv2, styles.pr5]} 

Note: some minor changes UI can be discuss in PR phase

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.

[abbasifaizan70]

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

On Android, the "Report" text appears too close to the toggle switch in the ToggleSettingOptionRow component. The spacing should match iOS, Web, and mWeb.

What is the root cause of that problem?

The issue occurs in ToggleSettingsOptionRow.tsx at line 165, where the container uses justifyContentBetween with a flex1 text container. On Android, justifyContentBetween with flex1 can render differently than iOS/Web, causing the text container to expand and reducing the visual gap between the text and the Switch.

The layout relies on justifyContentBetween without explicit spacing, which can be inconsistent across platforms, especially on Android.

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

Add explicit spacing between the text container and the Switch by adding marginRight to the text container. This ensures consistent spacing across platforms without changing the layout behavior.

Changes:

• Add styles.mr3 (12px right margin) to the text container View on line 166
• This matches spacing patterns used elsewhere in the codebase (e.g., OptionRow uses mr3 for content containers)

--- a/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
+++ b/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
@@ -163,7 +163,7 @@ function ToggleSettingOptionRow({
             <View style={styles.pRelative}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, shouldPlaceSubtitleBelowSwitch && styles.h10]}>
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1, styles.mr3]}>
                         {!!icon && (
                             <Icon
                                 src={icon}

What alternative solutions did you explore? (Optional)

N/A

[VictoriaExpensify]

This is so minor, but I guess we should fix it. I'm dropping the bounty right down because, from what I can tell, this is a very simple fix

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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