Workspace - Upgrade success description is left-aligned when RHP is resized to wide #105269

Activity

1. applause-bot

   added

   DeployBlockerCashThis issue or pull request should block deploymentThis issue or pull request should block deployment

   BugSomething is broken. Auto assigns a BugZero manager.Something is broken. Auto assigns a BugZero manager.

   on Oct 28, 2026
2. gleitebr

   added this to #expensify-bugson Oct 28, 2026
3. melvin-bot

   assigned

   JS00001

   on Oct 28, 2026
4. melvin-bot commented on Oct 28, 2026

   

   melvin-botBot

   on Oct 28, 2026 – with Melvin Bot

   More actions

   You have been assigned to this deploy blocker because you recently merged this PR: #104573
5. melvin-bot

   assigned

   Krishna2323

   on Oct 28, 2026
6. melvin-bot commented on Oct 28, 2026

   

   melvin-botBot

   on Oct 28, 2026 – with Melvin Bot

   More actions

   @JS00001 @Krishna2323 you have been assigned to this deploy blocker because you reviewed the offending PR: #104573
7. melvin-bot

   assigned

   war-in

   on Oct 28, 2026
8. melvin-bot commented on Oct 28, 2026

   

   melvin-botBot

   on Oct 28, 2026 – with Melvin Bot

   More actions

   @war-in you have been assigned to this deploy blocker because you authored the offending PR: #104573
9. melvin-bot commented on Oct 28, 2026

   

   melvin-botBot

   on Oct 28, 2026 – with Melvin Bot

   More actions

   💬 A slack conversation has been started in #expensify-open-source
10. github-actions

    added

    Engineering

    HourlyKSv2KSv2

    on Oct 28, 2026
11. github-actions commented on Oct 28, 2026

    

    github-actionsBot

    on Oct 28, 2026 – with GitHub Actions

    Contributor

    More 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.
12. war-in commented on Oct 28, 2026

    

    war-in

    on Oct 28, 2026

    Contributor

    More actions

    Enable resizableRHP beta

    @JS00001 we have another one 😄 could you demote? 🙏
13. MelvinBot commented on Oct 28, 2026

    

    MelvinBot

    on Oct 28, 2026

    Contributor

    More actions

    Deploy Blocker Investigation

    Causing PR: [Resizable RHP] Basic drag logic (high confidence). It added the resizableRHP beta and the drag-to-widen behavior, so this bug can't happen without it.

    Recommendation: Demote and fix as a follow-up. Don't revert. The bug is cosmetic, only shows with the resizableRHP beta on, and only after a manual drag on desktop. Reverting would remove the whole beta feature (34 files).

    Candidate fix (not yet tested in a browser): in UpgradeConfirmation.tsx:56, center the description wrapper, for example by adding styles.alignItemsCenter.

    Investigation details

    • Where the symptom shows: the default upgrade branch renders the description through RenderHTML (UpgradeConfirmation.tsx:55-59). It relies on a <centered-text> tag in the translation (en.ts:9190-9191), defined in BaseHTMLEngineProvider.tsx:127-131. The other branches (categorize, travel, distance rate) use a plain Text with textAlignCenter.
    • Layout change from the PR: the navigator measures a fixed 375px box, then CSS stretches the visible card to the dragged width (styles/index.ts:7174, styles/index.ts:6795, applied at RightModalNavigator.tsx:230). Content built for 375px is drawn much wider.
    • Not confirmed: the exact CSS reason the text goes left. The likely cause is that the HTML text box shrinks to fit its content. At 375px the wrapped lines fill the width and look centered. At wide widths the box sits on the left.
    • Why staging only: the upgrade screen last changed in ConfirmationPage composition migration, before this deploy, and the description rendering didn't change. The only new factor is the wider card.
    • Related beta bugs filed without the blocker label: Web - Expense - Avatar tooltip briefly appears outside RHP after resizing, "Role" RHP can´t be resized during workspace agent creation.
    • Worth checking at wide widths: other <centered-text> screens in the RHP: ImTeacherUpdateEmailPage.tsx, OutcomeScreenBase.tsx, IOURequestStepOdometerImage/index.tsx.

    ---

    Next Steps: An internal engineer should decide whether to remove DeployBlockerCash. Reply with @MelvinBot <your feedback> to refine this analysis.

    ---

    view run
14. JS00001 commented on Oct 28, 2026

    

    JS00001

    on Oct 28, 2026

    Contributor

    More actions

    behind a beta
15. JS00001

    added

    DailyKSv2KSv2

    and removed

    DeployBlockerCashThis issue or pull request should block deploymentThis issue or pull request should block deployment

    HourlyKSv2KSv2

    on Oct 28, 2026
16. apoorv-xs commented on Oct 28, 2026

    

    apoorv-xs

    on Oct 28, 2026

    More actions

    Proposal

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

    In Workspace Settings > Overview, when upgrading a workspace from Collect to Control and resizing the Right Hand Panel (RHP) to wide, the upgrade confirmation description ("You've successfully upgraded [Workspace] to the Control plan! View your subscription for more details.") is left-aligned instead of centered.

    What is the root cause of that problem?

    In src/pages/workspace/upgrade/UpgradeConfirmation.tsx, while specific upgrade variations (isCategorizing, isReporting, isTravelUpgrade, isDistanceRateUpgrade) render with <Text style={[styles.textAlignCenter, styles.w100]}>, the general plan upgrade flow renders HTML via <RenderHTML> inside:

    <View style={[styles.renderHTML, styles.w100]}>
        <RenderHTML html={translate('workspace.upgrade.completed.successMessage', policyName, planName ?? translate('workspace.type.control'), subscriptionLink)} />
    </View>

    The wrapper <View> is missing styles.textAlignCenter and styles.alignItemsCenter. When the RHP expands to a wide width, the styles.w100 container stretches across the modal, but its contents remain left-aligned.

    Additionally, in src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx, the custom <centered-text> tag is defined as:

    'centered-text': HTMLElementModel.fromCustomModel({
        tagName: 'centered-text',
        mixedUAStyles: {...styles.textAlignCenter},
        contentModel: HTMLContentModel.block,
    }),

    Because defaultViewProps in BaseHTMLEngineProvider enforces styles.alignItemsStart on block elements, a block element without styles.alignItemsCenter and styles.w100 is positioned at the flex-start (left) of the container.

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

    1. In src/pages/workspace/upgrade/UpgradeConfirmation.tsx, add styles.textAlignCenter and styles.alignItemsCenter to the wrapper <View> around <RenderHTML>:

    <View style={[styles.renderHTML, styles.textAlignCenter, styles.alignItemsCenter, styles.w100]}>
        <RenderHTML html={translate('workspace.upgrade.completed.successMessage', policyName, planName ?? translate('workspace.type.control'), subscriptionLink)} />
    </View>

    This matches the existing standard used in WorkspaceConnectionsPage.tsx and WorkspaceTagsPage.tsx.

    2. In src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx, enhance the custom model for centered-text to include styles.alignItemsCenter and styles.w100:

    'centered-text': HTMLElementModel.fromCustomModel({
        tagName: 'centered-text',
        mixedUAStyles: {...styles.textAlignCenter, ...styles.alignItemsCenter, ...styles.w100},
        contentModel: HTMLContentModel.block,
    }),

    What alternative solutions did you explore? (Optional)

    Changing contentModel of centered-text to HTMLContentModel.textual was explored. However, <centered-text> is frequently used in locales and outcome screens wrapped around or containing other custom block tags (such as <muted-text>), so maintaining HTMLContentModel.block with explicit flex centering and full width is safer and avoids invalid HTML content-model nesting.

    What automated tests can you add to prevent this from re-occurring?

    Add a unit test in tests/ui/UpgradeConfirmationTest.tsx verifying that the container rendered for the HTML description contains styles.textAlignCenter and styles.alignItemsCenter.

    Contributor details:

    • Email: [email protected]
    • Upwork Profile: https://www.upwork.com/freelancers/~01f7d7991785f2ee01
17. melvin-bot

    added

    ReviewingHas a PR in reviewHas a PR in review

    WeeklyKSv2KSv2

    and removed

    DailyKSv2KSv2

    on Oct 30, 2026