[HOLD][$250] Android - Attachment - The error notification is very close to the boarder of the phone

[kbecciv]

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. Launch the app
2. Log in with any account
3. Tap on any user
4. Tap on Plus button - Add attachment
5. Select option from Choose from gallery
6. Tap on any 3 MB mp4 format
7. Tap Send

Expected Result:

The error notification is not very close to the boarder of the phone

Actual Result:

The error notification is very close to the boarder of the phone

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS - there is no error message
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.85.5

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

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

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

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

[tylerkaraszewski]

Seems reasonable to work on.

[thesahindia]

Proposal

I tested this and the text also goes out of the screen.
Adding flex: 1 at inlineSystemMessage will fix that and for some spacing near the border we can pass styles.pr2 here

App/src/components/InlineSystemMessage.js

Line 24 in d48e147

<View style={[styles.flexRow, styles.alignItemsCenter]}>

[melvin-bot]

@adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

[adelekennedy]

internal
external

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[melvin-bot]

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

[vladnyk]

Proposal

App/src/components/InlineSystemMessage.js

Line 26 in c5fb877

<Text style={[styles.inlineSystemMessage]}>{props.message}</Text>

update Text style by adding flex:1, replacing marginLeft: 6 with marginHorizontal: 6 in styles.js

App/src/styles/styles.js

Line 2615 in c5fb877

inlineSystemMessage: {

    inlineSystemMessage: {
        flex: 1,
        color: themeColors.textSupporting,
        fontSize: variables.fontSizeLabel,
        fontFamily: fontFamily.GTA,
        marginHorizontal: 6,
    },

[Santhosh-Sellavel]

@chiragsalian

🎀 👀 🎀 C+ Reviewed

There are two proposals here first one & second one

Both are good & merely similar, the only difference is 1'st proposal suggests pr2 i.e 8 padding-right and the second proposal suggests marginHorizontal: 6 instead. I prefer 1'st proposal but I'll let you decide to take the final call.

Let's get @Expensify/design team's confirmation about the expected padding on the right side.

Thanks!

[shawnborton]

I actually wonder if we want to hold off on fixing this one until some of our offline pattern styles are deployed. Basically this error style should soon be updated with just a red dot instead of the !

@iwiznia what are your thoughts there?

But if we do decide just to fix this quickly, I would think the padding on the right of the error text should be 20px to match the text above and below it.

[iwiznia]

Yeah, this will be refactored soon too, I think we should hold.

[chiragsalian]

Sounds good, demoting, placing HOLD and removing external and help wanted label for now.

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[thesahindia]

We can close this. Now we are using popover to display the error.

[mvtglobally]

Issue not reproducible during KI retests. (Third week)
@chiragsalian @adelekennedy are we ok to close this?

[adelekennedy]

I think we're good to close!