[Due for payment 2025-12-30] [$250] Android- Domains - Long sentences are cut off in Verify domains page when font size is minimum

[lanitochka17]

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?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exp #76231
Email or phone of affected tester (no customers): applausetester+shsjsks9w9@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Critical User Impact
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Workspace Settings

Action Performed:

Precondition:

• Device font size is minimum.
• Log in with Expensifail account.

1. Launch Expensify app.
2. Go to Workspaces tab.
3. Tap on the domain name under Domains section.
4. Tap Verify.

Expected Result:

Long sentences will be wrapped into multiple lines without cutting off.

Actual Result:

Long sentences are cut off.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7026797_1765460119206.Screen_Recording_20251211_213113_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021999433360960849243
• Upwork Job ID: 1999433360960849243
• Last Price Increase: 2025-12-12
• Automatic offers:
• PiyushChandra17 | Contributor | 109824763

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

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

[ShridharGoel]

Proposal

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

Some long instructions on the Verify Domain screen are cut off when the device font size is set to minimum.

What is the root cause of that problem?

The HTML instructions are wrapped inside <Text> components that enforce inline text layout, so the rendered HTML cannot measure its own width and wrap. This causes the strings to be clipped on small font sizes instead of flowing to the next line.

App/src/pages/domain/BaseVerifyDomainPage.tsx

Lines 102 to 111 in bd180d7

	<View style={[styles.pt3, styles.gap5]}>
	<Text style={styles.webViewStyles.baseFontStyle}>
	<RenderHTML html={translate('domain.verifyDomain.beforeProceeding', {domainName})} />
	</Text>
	<Text style={styles.webViewStyles.baseFontStyle}>
	<OrderedListRow index={1}>
	<RenderHTML html={translate('domain.verifyDomain.accessYourDNS', {domainName})} />
	</OrderedListRow>
	</Text>

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

• Render the HTML blocks directly (without outer <Text> wrappers) so the HTML renderer can use block layout and wrap naturally.
• Keep the ordered list number and the HTML content in a flex row, giving the text container flex to wrap under the number.

Updated snippet:

<View style={[styles.pt3, styles.gap5]}>
    <RenderHTML html={translate('domain.verifyDomain.beforeProceeding', {domainName})} />

    <OrderedListRow index={1}>
        <View style={styles.flex1}>
            <RenderHTML html={translate('domain.verifyDomain.accessYourDNS', {domainName})} />
        </View>
    </OrderedListRow>

    <View>
        <OrderedListRow index={2}>
            <View style={styles.flex1}>
                <Text style={[styles.webViewStyles.baseFontStyle, styles.pb3]}>{translate('domain.verifyDomain.addTXTRecord')}</Text>

                {!domain.validateCodeError && (
                    <CopyableTextField
                        value={domain.validateCode}
                        isLoading={domain.isValidateCodeLoading}
                    />
                )}
            </View>
        </OrderedListRow>

        {!!domain.validateCodeError && (
            <FormHelpMessageRowWithRetryButton
                message={getLatestErrorMessage({errors: domain.validateCodeError})}
                onRetry={() => getDomainValidationCode(accountID, domainName)}
                isButtonSmall
            />
        )}
    </View>

    <OrderedListRow index={3}>
        <Text style={styles.webViewStyles.baseFontStyle}>{translate('domain.verifyDomain.saveChanges')}</Text>
    </OrderedListRow>

    <RenderHTML html={translate('domain.verifyDomain.youMayNeedToConsult')} />

    <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>
</View>

[PiyushChandra17]

Proposal

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

Android- Domains - Long sentences are cut off in Verify domains page when font size is minimum

What is the root cause of that problem?

1. It's a Known issue in Android native while rendering RenderHTML, RenderHTML uses their own internal styling

2. styles.renderHTML is missing here

3. We are wrapping RenderHTML in Text component

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

1. Add styles.renderHTML to both RenderHTML ie. beforeProceeding and accessYourDNS

2. Instead of Text, use View Component

<View style={styles.renderHTML, styles.webViewStyles.baseFontStyle}>
    <RenderHTML html={translate('domain.verifyDomain.beforeProceeding', {domainName})} />
</View>

<View style={styles.renderHTML, styles.webViewStyles.baseFontStyle}>
    <OrderedListRow index={1}>
        <RenderHTML html={translate('domain.verifyDomain.accessYourDNS', {domainName})} />
    </OrderedListRow>
</View>

What alternative solutions did you explore? (Optional)

n/A

Result

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.

[melvin-bot]

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

[melvin-bot]

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

[parasharrajat]

Both proposal makes sense. But based on proposal clarity, @PiyushChandra17's proposal is better. There is no wall of code snippets, and it has better instructions.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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