[$250] The intro text on More Features stays fixed when it should scroll with the page

[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.0.33-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: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @dubielzyk-expensify Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1726115971343019

Action Performed:

1. Go to Profile -> Workspace
2. Click a workspace -> More features
3. Observe the intro text

   Expected Result:

   The intro text that says: "use the toggles below to enable..." is fixed when you scroll the page

   Actual Result:

   Intro text should be attached to the content of the page and scroll with the rest of the cards. Also the padding on the right of the text missing. The text is too close to the edge:

   Workaround:

   Unknown

   Platforms:

   Which of our officially supported platforms is this issue occurring on?

   • [x] Android: Native
   • [x] Android: mWeb Chrome
   • [x] iOS: Native
   • [x] iOS: mWeb Safari
   • [ ] MacOS: Chrome / Safari
   • [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/b1e78d00-750c-4742-849c-45f0a5bb78ad

https://github.com/user-attachments/assets/c84e130f-baf1-4dd0-a176-e88bf11e413a

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837165152252710251
• Upwork Job ID: 1837165152252710251
• Last Price Increase: 2024-09-20
• Automatic offers:
• suneox | Reviewer | 104114387
• truph01 | Contributor | 104114389

Issue Owner

Current Issue Owner: @suneox

[melvin-bot[bot]]

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

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-09-13 08:13:38 UTC.

Proposal

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

The intro text on More Features stays fixed when it should scroll with the page

What is the root cause of that problem?

• On other pages like workspaceCategories, workspaceTags etc..., the HeaderText is scrollable for mobile devices and fixed otherwise.
• But on this page we haven't included logic for the same https://github.com/Expensify/App/blob/9240b03a5224b01e71365898f82960586cfec497/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx#L412-L417
• Additionally the gap between two sections on this page is 32px while we have 20px gap on other similar pages including profile, workflows, etc...

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

• So similar to other pages (workspaceCategories ,workspaceTags etc...) create a function getHeaderText to accommodate following

              <Text style={[styles.ph5, styles.mb4, styles.mt3, styles.textSupporting, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                  {translate('workspace.moreFeatures.subtitle')}
              </Text>

• And add logic to render it inside scrollView on mobile devices and inside otherwise.

          {!shouldUseNarrowLayout && getHeaderText()}
          <ScrollView contentContainerStyle={styles.pb2}>
              {shouldUseNarrowLayout && getHeaderText()}
              {sections.map(renderSection)}
          </ScrollView>

  https://github.com/Expensify/App/blob/caf529b46a6d99cab523729bc0ffdad2fbd94e5c/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx#L412-L416

• And here we need no remove styles.m3 from renderSections function, since it's not matching with styles of other similar pages (profile, workflows, etc...) https://github.com/Expensify/App/blob/caf529b46a6d99cab523729bc0ffdad2fbd94e5c/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx#L368

Optional changes current style of headerText somewhat differs from from other pages headerText so replace [styles.mb4, styles.mt3] with [styles.pb5, styles.pt3] to remove that 4px difference compare to other pages https://github.com/Expensify/App/blob/caf529b46a6d99cab523729bc0ffdad2fbd94e5c/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx#L412 WorkspaceCategoriesPage Reference WorkspaceTagsPage reference

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.

[Nodebrute]

Proposal

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

The intro text on More Features stays fixed when it should scroll with the page

What is the root cause of that problem?

We are not adding this Text in scrollView. In narrowLayout the header scrolls with the content but here we have not added that functionality. https://github.com/Expensify/App/blob/04762acb53f446708d6f649cbb6b527abbf72889/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx#L412-L414

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

We can create a const getHeaderText to store this

  const getHeaderText = () => (
        <Text style={[styles.ph5, styles.mb4, styles.mt3, styles.textSupporting, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
        {translate('workspace.moreFeatures.subtitle')}
        </Text>
    )

and then outside scrollView here we can add

      {!shouldUseNarrowLayout && getHeaderText()}

and then finally we can change scrollView

         <ScrollView contentContainerStyle={styles.pb2}>
                    {shouldUseNarrowLayout && getHeaderText()}
                    {sections.map(renderSection)}
                    </ScrollView>

Note: We might need some minor styling that can be done in PR.

What alternative solutions did you explore? (Optional)

We can use isSmallScreenWidth instead of shouldUseNarrowLayout

[ChavdaSachin]

Proposal

Updated added additional changes we should make for more consistent user experience.

Reference images for proposal Notice Larger gap between sections on MoreFeaturesPage	MoreFeaturesPage	WorkflowPage

[abekkala]

@Expensify/design I want to confirm that the "expected" above is true:

Intro text should be attached to the content of the page and scroll with the rest of the cards. Also the padding on the right of the text missing. The text is too close to the edge.

Should More Features scroll with the page or remain fixed at the top?

[shawnborton]

The More features part should stay fixed.

[abekkala]

That's what I was assuming Closing

[dubielzyk-expensify]

Why are we closing this? Sorry if I missed something, but this issue isn't fixed is it? To clarify the top header shouldn't scroll, but the text below should:

Sorry if I'm missing something though 😅

[shawnborton]

Agree with Jon, I think this is something we need to fix.

[abekkala]

OH! I did misunderstand. I thought you meant the whole "More Features" part stays fixed!

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[truph01]

Edited by proposal-police: This proposal was edited at 2024-09-21 01:17:03 UTC.

Proposal

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

• Intro text should be attached to the content of the page and scroll with the rest of the cards. Also the padding on the right of the text missing. The text is too close to the edge:

What is the root cause of that problem?

• The intro text is not added to ScrollView:

https://github.com/Expensify/App/blob/04762acb53f446708d6f649cbb6b527abbf72889/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx#L412-L414

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

• We should move the intro text to the ScrollView:

                <ScrollView contentContainerStyle={[styles.pb2]}>
                    <Text style={[styles.ph5, styles.mb4, styles.mt3, styles.textSupporting, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                        {translate('workspace.moreFeatures.subtitle')}
                    </Text>
                    {sections.map(renderSection)}
                </ScrollView>

• All the padding styles can be tested and fixed in when implementing PR.

What alternative solutions did you explore? (Optional)

[truph01]

@dubielzyk-expensify Can you help confirm that: This issue need to be resolved on all platforms, right?

[suneox]

@dubielzyk-expensify Can you help confirm that: This issue need to be resolved on all platforms, right?

I think it should be resolved on all platforms, but we should wait for confirmation.

[dubielzyk-expensify]

Yep. All platforms please

[suneox]

Yep. All platforms please

Based on the confirmation @truph01 proposal LGTM. and I believe the issue The text is too close to the edge has been fixed in #48565.

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @srikarparsi, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Nodebrute]

@dubielzyk-expensify we only scroll the header text in narrow layouts and apply the same approach for the categories page and other workspace pages.

https://github.com/user-attachments/assets/408b5ed7-9d3f-4ebc-9179-59c4f301edf1

And here, only small screen devices are selected.

Which of our officially supported platforms is this issue occurring on?

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

[Nodebrute]

@suneox With the selected proposal, the text will scroll in all cases. We only scroll the header text when we're in narrow layouts.

cc: @dubielzyk-expensify

[suneox]

@suneox With the selected proposal, the text will scroll in all cases. We only scroll the header text when we're in narrow layouts.

@Nodebrute The expected behavior has been confirmed in this comment

[Nodebrute]

Yes, we must fix this on all platforms, but we only scroll the header text in narrow layouts. This is the same approach we use on other workspace pages. Can you check this video https://github.com/Expensify/App/issues/49075#issuecomment-2368158721

cc: @shawnborton @dubielzyk-expensify

[dubielzyk-expensify]

In the wider layout example is it possible to have the intro text scroll, but not the table header?

[truph01]

In the wider layout example is it possible to have the intro text scroll, but not the table header?

@dubielzyk-expensify Could you provide more details? I don't fully understand what you're referring to.

[dubielzyk-expensify]

My bad. Can we do this?

[truph01]

I can fix the 'Name-Status' header, but I’m unable to make the 'Get a better overview ...' text scrollable:

https://github.com/user-attachments/assets/ba3e4547-5917-4b80-93dd-492282d93770

[truph01]

@dubielzyk-expensify I don't see any similarity between the workspace 'More Features' page and other pages like workspace categories, tags, or taxes. Therefore, there’s no reason to require us to apply the same behavior on the 'More Features' page as on those other pages.

So I think we just need to apply the changes to all platforms as you mentioned above:

All platforms please

[dubielzyk-expensify]

Yeah, I think for the pages with tables, let's just leave them as is for now and proceed with the original bug in this issue.

It's still solvable by making a sticky header table when scrolling, but it requires more work

[truph01]

@srikarparsi C+ has reviewed the proposal. All yours!

[dannymcclain]

I don't see any similarity between the workspace 'More Features' page and other pages like workspace categories, tags, or taxes. Therefore, there’s no reason to require us to apply the same behavior on the 'More Features' page as on those other pages.

Definitely agree with this so I agree with where you all landed. Make More features work how we want it to work and leave the table pages alone for now.

[srikarparsi]

Cool, sounds good. If we want the intro text to scroll up with the page on all platforms then @truph01's proposal looks good to me too

[melvin-bot[bot]]

📣 @suneox 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @truph01 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[truph01]

@suneox PR is ready.

[suneox]

Checklist

• [X] [@suneox] The PR that introduced the bug has been identified. Link to the PR: I don’t think there’s a PR responsible for this issue, as the implementation documents seem to be missing a proper description about scroll behavior for the header
• [X] [@suneox] 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: N/A
• [X] [@suneox] A discussion in #expensify-bugs 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: N/A
• [X] [@suneox] Determine if we should create a regression test for this bug. N/A

[suneox]

@abekkala The PR has been deployed to production for a week, so we can proceed with the payment for this issue.

[abekkala]

PAYMENT SUMMARY:

• Fix: @truph01 OFFER
• PR Review: @suneox OFFER

[abekkala]

@truph01 and @suneox payments sent and contracts ended - thank you! 🎉