Domain - Text in "Verify Domain" page is cut off with vertical device borders

[vincdargento]

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.75-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: -
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 15 Pro / 18.6.2
App Component: Workspace Settings

Action Performed:

Precondition: App is in Spanish

1. Sign into a Beta enabled user
2. Go to WS
3. Tap on the "New" dropdown button > "New domain""
4. Enter a domain which is valid and doesn't exit at the moment (For example "hey.com")
5. Continue with SAML setup > Verify Domain > Observe text placement vertically

Expected Result:

User expects the text to be properly displayed with accordance to the devices screen size

Actual Result:

On the iPhone 15 Pro the text is highly cut off in Spanish with the device border while on the iPhone 17 it is cut off even on English. Seems to be according to the device screen size

Workaround:

Unknown

Platforms:

• 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

[melvin-bot]

Triggered auto assignment to @strepanier03 (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.

[melvin-bot]

Triggered auto assignment to @danieldoglas (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[nyomanjyotisa]

Proposal

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

Domain - Text in "Verify Domain" page is cut off with vertical device borders

What is the root cause of that problem?

The warning text with icon uses a flexRow layout, but the Text component doesn't have flex properties to allow it to shrink and wrap on smaller screens

App/src/pages/domain/BaseVerifyDomainPage.tsx

Lines 142 to 149 in 3a9430e

	<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
	<Icon
	src={Exclamation}
	fill={theme.icon}
	medium
	/>
	<Text style={styles.mutedNormalTextLabel}>{translate('domain.verifyDomain.warning')}</Text>
	</View>

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

Wrap the Text component in a View with flex1 to allow the text to shrink and wrap properly

                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                            <Icon
                                src={Exclamation}
                                fill={theme.icon}
                                medium
                            />
                            <View style={styles.flex1}>
                                <Text style={styles.mutedNormalTextLabel}>{translate('domain.verifyDomain.warning')}</Text>
                            </View>
                        </View>

App/src/pages/domain/BaseVerifyDomainPage.tsx

Lines 142 to 149 in 3a9430e

	<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
	<Icon
	src={Exclamation}
	fill={theme.icon}
	medium
	/>
	<Text style={styles.mutedNormalTextLabel}>{translate('domain.verifyDomain.warning')}</Text>
	</View>

Or we could add flexShrink1 directly to the Text component

What alternative solutions did you explore? (Optional)

None

[jasperhuangg]

This is behind a beta, will need back-end changes and is a relatively minor issue, definitely doesn't need to block deploy.