[Hold for payment August 11th] iPad - "Manage cards" text is not centered in the button

[isagoico]

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

---

Action Performed:

1. Log in to staging
2. Navigate to a workspace

Expected Result:

All texts that are inside buttons should be centered

Actual Result:

The text "Manage cards" is not centered in the button

Workaround:

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

Platform:

Where is this issue occurring?

• iOS iPad

Version Number: 1.0.81-3

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @jasperhuangg https://expensify.slack.com/archives/C01GTK53T8Q/p1627608730003300

“Manage Cards” button text isn’t centered on iPad

[MelvinBot]

Triggered auto assignment to @stitesExpensify (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @Christinadobrzyn (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[rdjuric]

This is caused by the padding we're adding to textStyle here

App/src/pages/workspace/WorkspaceCardPage.js

Lines 171 to 173 in 87cbc24

	textStyles={[
	!isSmallScreenWidth ? styles.p5 : {},
	]}

We add this padding because our page was designed to only use width: auto on the button when the viewport passes our isSmallScreenWidth check. When it doesn't, we manually add padding so that the text has some breathing room inside the button.

The problem is that styles.p5 also adds vertical padding while we only want horizontal padding. Changing it to [styles.pr5, styles.pl5] gives the correct behavior on all platforms.

[MelvinBot]

Triggered auto assignment to @iwiznia (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.