[Due for payment 2025-03-05] [$250] mWeb/Safari - Subscription - "Downgrade workspace" button is hidden behind iOS controls

[IuliiaHerets]

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.0.94-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #56142
Issue reported by: Applause Internal Team
Device used: Apple iPhone 13 / Safari
App Component: Other

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with a new Gmail account
3. Set the language to Spanish
4. Create a workspace
5. Navigate to Settings - Subscription
6. Tap on "Control"
7. Tap on "Upgrade"
8. Tap on "Got it, thanks"
9. Create an additional workspace
10. Navigate to Settings - Subscription
11. Tap on "Collect"

Expected Result:

I should be able to scroll.

Actual Result:

"Downgrade workspace" button is hidden behind iOS controls. I'm unable to scroll. The button is unreachable if the language is set to Spanish, if English is used, the top of the button is visible and can be tapped.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6732971_1738663210726.TDYR8965.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021886816277383900474
• Upwork Job ID: 1886816277383900474
• Last Price Increase: 2025-02-04
• Automatic offers:
• Krishna2323 | Contributor | 106072719

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

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

[misamikasa]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-04 12:13:58 UTC.

Proposal

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

"Downgrade workspace" button is hidden behind iOS controls

What is the root cause of that problem?

The content on "Downgrade workspace" is not fit in the screen, and user can't scroll down

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

Wrap this with ScrollView

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

I don't think we need an automated test for this

What alternative solutions did you explore? (Optional)

n/a

[github-actions]

⚠️ @misamikasa Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-04 13:41:02 UTC.

Proposal

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

mWeb/Safari - Subscription - "Downgrade workspace" button is hidden behind iOS controls

What is the root cause of that problem?

• The intro component and the confirmation component isn't wrapped in a ScrollView, this bug also appear in WorkspaceUpgradePage.
  

  App/src/pages/workspace/downgrade/WorkspaceDowngradePage.tsx

  Lines 58 to 73 in bfb97c5

  	{isDowngraded && !!policyID && (
  	<DowngradeConfirmation
  	onConfirmDowngrade={() => {
  	Navigation.dismissModal();
  	}}
  	policyID={policyID}
  	/>
  	)}
  	{!isDowngraded && (
  	<DowngradeIntro
  	policyID={policyID}
  	onDowngrade={downgradeToTeam}
  	buttonDisabled={isOffline}
  	loading={policy?.isPendingDowngrade}
  	/>
  	)}

  
  

  App/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx

  Lines 190 to 204 in bfb97c5

  	{!!policy && isUpgraded && (
  	<UpgradeConfirmation
  	onConfirmUpgrade={goBack}
  	policyName={policy.name}
  	/>
  	)}
  	{!isUpgraded && (
  	<UpgradeIntro
  	policyID={policyID}
  	feature={feature}
  	onUpgrade={upgradeToCorporate}
  	buttonDisabled={isOffline}
  	loading={policy?.isPendingUpgrade}
  	/>
  	)}

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

• We should wrap intro and confirmation component in a scrollview in both components.
• ScrollView should also have a style styles.flexGrow1.
• We also need to make few edits in ConfirmationPage.
  • Wrap the children with a view instead of empty fragments and apply styles.h100 to it.
  • We might need to not need styles.h100 applied always so we can pass it through a prop from UpgradeConfirmation and DowngradeConfirmation
    

    App/src/components/ConfirmationPage.tsx

    Lines 58 to 94 in bfb97c5

    	return (
    	<>
    	<View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
    	{isLottie ? (
    	<Lottie
    	source={illustration}
    	autoPlay
    	loop
    	style={[styles.confirmationAnimation, illustrationStyle]}
    	/>
    	) : (
    	<View style={[styles.confirmationAnimation, illustrationStyle]}>
    	<ImageSVG
    	src={illustration}
    	contentFit="contain"
    	/>
    	</View>
    	)}
    	<Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2, headingStyle]}>{heading}</Text>
    	<Text style={[styles.textAlignCenter, descriptionStyle]}>{description}</Text>
    	</View>
    	{shouldShowButton && (
    	<FixedFooter>
    	<Button
    	success
    	large
    	text={buttonText}
    	testID="confirmation-button"
    	style={styles.mt6}
    	pressOnEnter
    	onPress={onButtonPress}
    	/>
    	</FixedFooter>
    	)}
    	</>
    	);
    	}

• IOURequestStepUpgrade.tsx also seems to have the same problem, we should fix this component too.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

• Instead of adding ScrollView in every component, we can directly add that in UpgradeConfirmation, DowngradeConfirmation, UpgradeIntro and DowngradeIntro. We would still need to make changes in ConfirmationPage, as explained in the main solution.

[Krishna2323]

PROPOSAL UPDATED

[melvin-bot]

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

[melvin-bot]

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

[sobitneupane]

Thanks for the proposal, everyone.

@Krishna2323, could you please explain why each step in the change you suggested is required? (I'm asking to understand why simply adding ScrollView is not enough.)

IOURequestStepUpgrade.tsx also seems to have the same problem, we should fix this component too.

Could you please provide reproduction steps for the issue?