[Due for payment now] [$250] Web - Subscription- The top of explore plans does not scroll if the screen size is increased

[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.1.71-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Open https://staging.new.expensify.com/
2. Click Account tab
3. Click on "Subscription"
4. Click on "Explore all plans"

Expected Result:

The plans page should fit on screen

Actual Result:

The top is cut off and user can't scroll the page

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6869638_1750864180570.Recording__1149.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021940382793874641239
• Upwork Job ID: 1940382793874641239
• Last Price Increase: 2025-07-09
• Automatic offers:
• Krishna2323 | Contributor | 107998546

Issue Owner

Current Issue Owner: @flaviadefaria

[melvin-bot]

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

[Krishna2323]

Proposal

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

Web - Subscription- The top of explore plans does not scroll if the screen size is increased

What is the root cause of that problem?

• No max height is set on the content of the Modal.
  

  App/src/pages/settings/Subscription/SubscriptionPlan/ComparePlansModal.tsx

  Lines 62 to 79 in d41364f

  	return (
  	<Modal
  	isVisible={isModalVisible}
  	type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED : CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
  	onClose={() => setIsModalVisible(false)}
  	animationOut={isSmallScreenWidth ? animationOut : undefined}
  	innerContainerStyle={isSmallScreenWidth ? undefined : styles.workspaceSection}
  	>
  	<HeaderWithBackButton
  	title={translate('subscription.compareModal.comparePlans')}
  	shouldShowCloseButton
  	onCloseButtonPress={() => setIsModalVisible(false)}
  	shouldShowBackButton={false}
  	style={isSmallScreenWidth ? styles.pl4 : [styles.pr3, styles.pl8]}
  	/>
  	{isSmallScreenWidth ? <ScrollView addBottomSafeAreaPadding>{renderPlans()}</ScrollView> : renderPlans()}
  	</Modal>
  	);

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

• We should first import and use const {windowHeight} = useWindowDimensions();.
• Then remove the condition to use ScrollView and always use ScrollView.
• Lastly, we need to wrap HeaderWithBackButton and ScrollView with a View with maxHeight.

        <Modal
            isVisible={isModalVisible}
            type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED : CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
            onClose={() => setIsModalVisible(false)}
            animationOut={isSmallScreenWidth ? animationOut : undefined}
            innerContainerStyle={isSmallScreenWidth ? undefined : styles.workspaceSection}
        >
            <View style={{maxHeight}}>
                <HeaderWithBackButton
                    title={translate('subscription.compareModal.comparePlans')}
                    shouldShowCloseButton
                    onCloseButtonPress={() => setIsModalVisible(false)}
                    shouldShowBackButton={false}
                    style={isSmallScreenWidth ? styles.pl4 : [styles.pr3, styles.pl8]}
                />
                <ScrollView addBottomSafeAreaPadding>{renderPlans()}</ScrollView>
            </View>
        </Modal>

• Optional: We can subtract some value from maxHeight to get some spacing around modal: <View style={{maxHeight: maxHeight - 80, padding: 20}}>.

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

N/A

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2025-06-25.23-46-32.mp4

[thelullabyy]

Proposal

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

• Web - Subscription- The top of explore plans does not scroll if the screen size is increased

What is the root cause of that problem?

• The issue occurs because we don't constrain the height of the inner modal content in this component:
  

  App/src/pages/settings/Subscription/SubscriptionPlan/ComparePlansModal.tsx

  Line 68 in d41364f

  innerContainerStyle={isSmallScreenWidth ? undefined : styles.workspaceSection}

As a result, when the screen height is too short, the "Explore Plan" modal gets clipped and is not scrollable.

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

• We can resolve this by applying a fixed height to the modal content when not on small screens:

App/src/pages/settings/Subscription/SubscriptionPlan/ComparePlansModal.tsx

Line 68 in d41364f

innerContainerStyle={isSmallScreenWidth ? undefined : styles.workspaceSection}

Option 1:

innerContainerStyle={isSmallScreenWidth ? undefined : {...styles.workspaceSection, height: '80%'}}

Option 2:

innerContainerStyle={isSmallScreenWidth ? undefined : {...styles.workspaceSection, maxHeight: windowHeight - 20}}

• Additionally, we should always wrap the modal content in a ScrollView to ensure the full content is accessible, even on smaller screens:
  

  App/src/pages/settings/Subscription/SubscriptionPlan/ComparePlansModal.tsx

  Line 77 in d41364f

  {isSmallScreenWidth ? <ScrollView addBottomSafeAreaPadding>{renderPlans()}</ScrollView> : renderPlans()}

• Optional: We can move this header to the ScrollView, so the code change will be:

    return (
        <Modal
            isVisible={isModalVisible}
            type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED : CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
            onClose={() => setIsModalVisible(false)}
            animationOut={isSmallScreenWidth ? animationOut : undefined}
            innerContainerStyle={isSmallScreenWidth ? undefined : {...styles.workspaceSection, maxHeight: windowHeight - 20}}
        >
            <ScrollView addBottomSafeAreaPadding>
                <HeaderWithBackButton
                    title={translate('subscription.compareModal.comparePlans')}
                    shouldShowCloseButton
                    onCloseButtonPress={() => setIsModalVisible(false)}
                    shouldShowBackButton={false}
                    style={isSmallScreenWidth ? styles.pl4 : [styles.pr3, styles.pl8]}
                />
                {renderPlans()}
            </ScrollView>
        </Modal>
    );

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

• N/A

What alternative solutions did you explore? (Optional)

[melvin-bot]

@flaviadefaria Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

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