[$125] Test drive modal does not cover the entire bottom when on a smaller screen

[m-natarajan]

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.43-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @JS00001
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Signup for new account
2. Complete Onboarding
3. Resize window when "Test Drive" modal displayed

Expected Result:

The test drive modal should be fully responsive, adapting to smaller screen sizes by covering the entire screen height, including the bottom area, ensuring no content behind is visible and the UI remains accessible.

Actual Result:

On smaller screens, the modal does not extend to the bottom of the screen, leaving part of the underlying page visible

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Recording.1212.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021921909499230962716
• Upwork Job ID: 1921909499230962716
• Last Price Increase: 2025-06-03

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

[melvin-bot]

Triggered auto assignment to @slafortune (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-05-09 17:49:03 UTC.

Proposal

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

Test drive modal does not cover the entire bottom when on a smaller screen

What is the root cause of that problem?

In small sceen we are using modal type CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED

App/src/components/FeatureTrainingModal.tsx

Line 315 in 0e028c3

type={onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}

And set maxWidth in

App/src/components/TestDriveModal.tsx

Line 37 in 0e028c3

modalInnerContainerStyle={styles.testDriveModalContainer}

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

We should remove maxWidth in small screen by

1. Update style

       testDriveModalContainer: {
            // On small/medium screens, we need to remove the top padding
            paddingTop: 0,
        },

        testDriveModalContainerMaxWidth: {
            // On medium screens, we need to prevent the modal from becoming too big
            maxWidth: 500,
        },

2. Then remove maxWidth in small screen

      modalInnerContainerStyle={!shouldUseNarrowLayout ? {...styles.testDriveModalContainerMaxWidth, ...styles.testDriveModalContainer} : styles.testDriveModalContainer}

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


None

What alternative solutions did you explore? (Optional)

We should add a new props like shouldShowCenteredSmall and pass it as CONST.MODAL.MODAL_TYPE.CENTERED_SMALL from TestDriveModal component

    type={onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : (shouldShowCenteredSmall ? CONST.MODAL.MODAL_TYPE.CENTERED_SMALL : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED)}

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-09 18:03:03 UTC.

Proposal

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

Test drive modal does not cover the entire bottom when on a smaller screen

What is the root cause of that problem?

Here we are using testDriveModalContainer N/ that contain maxWidth: 500 we suppose to apply this only to large screen where we want to prevent the model from becoming too big, but when we narrow the screen size maxWidth: 500 remain applied that prevent the model from growing

App/src/components/TestDriveModal.tsx

Line 37 in 0e028c3

modalInnerContainerStyle={styles.testDriveModalContainer}

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

we should use

modalInnerContainerStyle={{
    ...styles.pt0,
    ...(!shouldUseNarrowLayout ? {maxWidth: 500} : {}),
}}

like we did here

App/src/components/MigratedUserWelcomeModal.tsx

Line 91 in 0e028c3

modalInnerContainerStyle={{...styles.pt0, ...(shouldUseNarrowLayout ? {} : styles.pb8)}}

like we are doing with other models

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)

We can also adjust these designs properly

App/src/styles/index.ts

Lines 5724 to 5729 in 0e028c3

	testDriveModalContainer: {
	// On small/medium screens, we need to remove the top padding
	paddingTop: 0,
	// On medium screens, we need to prevent the modal from becoming too big
	maxWidth: 500,
	},

so the model take proper styling based on screen size
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.

Resultd

2025-05-14.at.14.40.00.-.Sapphire.Tahr.mp4

[ChavdaSachin]

Proposal

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

Test drive modal does not cover the entire bottom when on a smaller screen

What is the root cause of that problem?

Following logic changes the modal type to bottom docker as soon as screen width falls under 800.
And thence when screen width is between 500-800 we could observe an empty space on right of the modal due to modal's maxWidth: 500 style.

App/src/components/TestDriveModal.tsx

Line 37 in 7a7957c

modalInnerContainerStyle={styles.testDriveModalContainer}

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

Option 1. - allow model to scale for small screens
Remove maxWidth: 500 style from here so model could freely scale for screen width 500-800.

App/src/styles/index.ts

Line 5728 in 7a7957c

maxWidth: 500,

Note: this changes would only be affected for small screens, and model width would still remain same(500) for larger screens.

Option 2. bottom dock the modal only for currently supported max width(500).
Create a new screen-size breakpoint to check whether screen width is less than 500.

    const isGreaterThan500Width = windowWidth > 500;

App/src/hooks/useResponsiveLayout/index.ts

Line 38 in 7a7957c

Modify FeatureTrainingModal component to accept modal type and update following condition to use passed model type when available, and conditionally pass modal type from TestDriveModal component.

            type={type ?? onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}

App/src/components/FeatureTrainingModal.tsx

Line 315 in ab2b0e0

type={onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}

            type={isGreaterThan500Width ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}

App/src/components/TestDriveModal.tsx

Line 26 in ab2b0e0

<FeatureTrainingModal

Test Branch for Option 2.
https://github.com/ChavdaSachin/App/tree/testBranch

Note: Variable naming would be improved during PR phase

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)

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.

[nabi-ebrahimi]

Proposal

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

Test drive modal does not cover the entire bottom when on a smaller screen

What is the root cause of that problem?

The current styling does not properly support small screens, causing layout issues in the modal. here

     innerContainerStyle={{
                boxShadow: 'none',
                paddingBottom: 20,
                paddingTop: onboardingIsMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
                ...(onboardingIsMediumOrLargerScreenWidth
                    ? // Override styles defined by MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
                      // To make it take as little space as possible.
                      {
                          flex: undefined,
                          width: 'auto',
                      }
                    : {}),
                ...modalInnerContainerStyle,
            }}

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

We need to apply appropriate styling for small screens, too.

  innerContainerStyle={{
                boxShadow: 'none',
                paddingBottom: 20,
                paddingTop: onboardingIsMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
                ...(onboardingIsMediumOrLargerScreenWidth
                    ? {
                          flex: undefined,
                          width: 'auto',
                          maxWidth: 500, 
                      }
                    : {
                          flex: 1,
                          justifyContent: 'flex-end',
                      }),
            }}

We should also ensure that paddingTop is set to 0 on web platforms.

Screen.Recording.2025-05-10.at.1.47.54.AM.mov

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]

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