[Hold for reporting bonus] Dev - Pay button text is cut off in Report.

[kavimuru]

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. In LHN, choose any Report that has request money.
2. Notice that the Pay button is cut off text.

Expected Result:

Pay button text should be fully visible.

Actual Result:

Pay button text is cut off .

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.2.30-0
Reproducible in staging?: Need reproduction
Reproducible in production?: Need reproduction
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Screen.Recording.2022-11-23.at.10.13.58.mov

Expensify/Expensify Issue URL:
Issue reported by: @hungvu193
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1669173251556449

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[grgia]

    buttonSmall: {
        borderRadius: variables.buttonBorderRadius,
        height: variables.componentSizeSmall,
        paddingTop: 10,
        paddingHorizontal: 14,
        paddingBottom: 10,
        backgroundColor: themeColors.buttonDefaultBG,
    },

    buttonMedium: {
        borderRadius: variables.buttonBorderRadius,
        height: variables.componentSizeNormal,
        paddingTop: 6,
        paddingRight: 16,
        paddingBottom: 6,
        paddingLeft: 16,
        backgroundColor: themeColors.buttonDefaultBG,
    },

@shawnborton here's our current small/medium button styles. Currently, this bug is only reproducible on mobile (at least IOS, have yet to test android)

#12762 (comment)
Link to discussion/ fix in IOU Preview for medium button

[grgia]

[shawnborton]

I think we just have way too much top/bottom padding for the small buttons. What happens when we reduce it to something smaller, like 4?

[grgia]

Here's with 4

[shawnborton]

Nice, that feels good to me for the gray buttons. I see in the green "Pay" button in the background, it looks weird. Any idea why that button would look different from the others?

[Puneet-here]

paddingBottom and paddingTop should be 6px to keep the pay button correct