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

@lschurr

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:

Navigate to https://staging.new.expensify.com/
Log in with a new Gmail account
Set the language to Spanish
Create a workspace
Navigate to Settings - Subscription
Tap on "Control"
Tap on "Upgrade"
Tap on "Got it, thanks"
Create an additional workspace
Navigate to Settings - Subscription
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:

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

@lschurr

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.

🚨 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

@misamikasa

⚠️ @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).

🚨 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.

PROPOSAL UPDATED

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

@sobitneupane

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

@Krishna2323

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?

Reviewing label has been removed, please complete the "BugZero Checklist".

@sobitneupane

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.6-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix: mWeb/Safari - Subscription - "Downgrade workspace" button is hidden behind iOS controls. #56781

If no regressions arise, payment will be issued on 2025-03-05. 🎊

For reference, here are some details about the assignees on this issue:

@sobitneupane requires payment through NewDot Manual Requests
@Krishna2323 requires payment automatic offer (Contributor)

@sobitneupane

@sobitneupane @lschurr @sobitneupane The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

@sobitneupane

@sobitneupane could you complete the checklist for this one? Thanks!

BugZero Checklist:

[Contributor] Classify the bug:

Bug classification

Source of bug:

1a. Result of the original design (eg. a case wasn't considered)
1b. Mistake during implementation
1c. Backend bug
1z. Other:

Where bug was reported:

2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
2b. Reported on staging (eg. found during regression or PR testing)
2d. Reported on a PR
2z. Other:

Who reported the bug:

[Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to comment: Downgrade Feature #54356 (comment)
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion:
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue:

Regression Test Proposal

Test:

Log in with a new Gmail account
Set the language to Spanish
Create a workspace
Navigate to Settings - Subscription
Tap on "Control"
Tap on "Upgrade"
Tap on "Got it, thanks"
Create an additional workspace
Navigate to Settings - Subscription
Tap on "Collect"
Verify that the content is scrollable if it exceeds the screen height

Do we agree 👍 or 👎

@Krishna2323

Payment summary:

Contributor: $250 @Krishna2323 (paid in Upwork)
Reviewer: $250 @sobitneupane (please request in NewDot)

@sobitneupane

$250 approved for @sobitneupane

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

PROPOSAL UPDATED

17 remaining items

BugZero Checklist:

Regression Test Proposal

Test:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

	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>
	)}
	</>
	);
	}

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Feb 4, 2025

misamikasa commented on Feb 4, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

github-actions commented on Feb 4, 2025

Krishna2323 commented on Feb 4, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Krishna2323 commented on Feb 4, 2025

PROPOSAL UPDATED

melvin-bot commented on Feb 4, 2025

melvin-bot commented on Feb 4, 2025

sobitneupane commented on Feb 6, 2025

17 remaining items

melvin-bot commented on Feb 26, 2025

melvin-bot commented on Feb 26, 2025

melvin-bot commented on Feb 26, 2025

lschurr commented on Feb 28, 2025

sobitneupane commented on Mar 5, 2025

BugZero Checklist:

Regression Test Proposal

Test:

lschurr commented on Mar 5, 2025

garrettmknight commented on May 20, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions