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

m-natarajan · 2024-09-12T12:35:24Z

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:

Go to Profile -> Workspace
Click a workspace -> More features
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?

Screenshots/Videos

CleanShot.2024-09-12.at.14.40.13.mp4

RPReplay_Final1726144041.MP4

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 · 2024-09-12T12:35:34Z

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 · 2024-09-12T12:41:23Z

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

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 412 to 417 in 9240b03

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

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>

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 412 to 416 in caf529b

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

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

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 368 in caf529b

style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}

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

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 412 in caf529b

<Text style={[styles.ph5, styles.mb4, styles.mt3, styles.textSupporting, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>

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 · 2024-09-13T02:44:50Z

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.

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 412 to 414 in 04762ac

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

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 · 2024-09-13T08:22:18Z

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 · 2024-09-16T18:54:46Z

@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 · 2024-09-16T18:56:17Z

The More features part should stay fixed.

abekkala · 2024-09-18T19:55:36Z

That's what I was assuming
Closing

dubielzyk-expensify · 2024-09-19T03:26:47Z

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 · 2024-09-19T04:13:44Z

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

abekkala · 2024-09-20T16:21:14Z

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

melvin-bot · 2024-09-20T16:21:21Z

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

melvin-bot · 2024-09-20T16:21:27Z

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

truph01 · 2024-09-21T01:12:29Z

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:

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 412 to 414 in 04762ac

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

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 · 2024-09-21T01:14:35Z

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

suneox · 2024-09-21T05:36:58Z

@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 · 2024-09-23T06:46:21Z

Yep. All platforms please

melvin-bot · 2024-09-23T08:13:49Z

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

Nodebrute · 2024-09-23T13:01:15Z

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

Screen.Recording.2024-09-23.at.5.56.25.PM.mov

And here, only small screen devices are selected.

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

Nodebrute · 2024-09-23T13:04:33Z

@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 · 2024-09-23T13:52:18Z

@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 · 2024-09-23T14:20:46Z

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 #49075 (comment)

cc: @shawnborton @dubielzyk-expensify

dubielzyk-expensify · 2024-09-24T00:36:18Z

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

truph01 · 2024-09-24T00:41:38Z

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 · 2024-09-24T03:03:54Z

My bad. Can we do this?

truph01 · 2024-09-24T03:23:48Z

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

Screen.Recording.2024-09-24.at.10.19.50.mov

truph01 · 2024-09-24T03:32:45Z

@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 · 2024-09-24T03:43:05Z

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 · 2024-09-24T03:47:57Z

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

dannymcclain · 2024-09-24T13:34:46Z

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 · 2024-09-24T21:55:54Z

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 · 2024-09-24T21:56:18Z

📣 @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 · 2024-09-24T21:56:21Z

📣 @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 · 2024-09-25T02:34:36Z

@suneox PR is ready.

suneox · 2024-10-07T18:56:40Z

Checklist

[@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
[@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
[@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
[@suneox] Determine if we should create a regression test for this bug. N/A

suneox · 2024-10-08T17:00:20Z

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

abekkala · 2024-10-11T14:32:51Z

PAYMENT SUMMARY:

Fix: @truph01 OFFER
PR Review: @suneox OFFER

abekkala · 2024-10-11T14:33:12Z

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

m-natarajan added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 12, 2024

melvin-bot bot assigned abekkala Sep 12, 2024

melvin-bot bot added the Overdue label Sep 16, 2024

melvin-bot bot removed the Overdue label Sep 16, 2024

melvin-bot bot added the Overdue label Sep 18, 2024

abekkala closed this as completed Sep 18, 2024

melvin-bot bot removed the Overdue label Sep 18, 2024

dubielzyk-expensify reopened this Sep 19, 2024

abekkala added the External Added to denote the issue can be worked on by a contributor label Sep 20, 2024

melvin-bot bot changed the title ~~The intro text on More Features stays fixed when it should scroll with the page~~ [$250] The intro text on More Features stays fixed when it should scroll with the page Sep 20, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 20, 2024

melvin-bot bot assigned suneox Sep 20, 2024

melvin-bot bot added the Overdue label Sep 23, 2024

melvin-bot bot removed the Overdue label Sep 23, 2024

melvin-bot bot assigned srikarparsi Sep 23, 2024

srikarparsi assigned truph01 Sep 24, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 24, 2024

truph01 mentioned this issue Sep 25, 2024

feat: move intro text to ScrollView #49679

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 25, 2024

abekkala closed this as completed Oct 11, 2024

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

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

Comments

m-natarajan commented Sep 12, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Sep 12, 2024

ChavdaSachin commented Sep 12, 2024 • edited by github-actions bot Loading

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 alternative solutions did you explore? (Optional)

Nodebrute commented Sep 13, 2024 • edited Loading

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 alternative solutions did you explore? (Optional)

ChavdaSachin commented Sep 13, 2024

Proposal

abekkala commented Sep 16, 2024

shawnborton commented Sep 16, 2024

abekkala commented Sep 18, 2024

dubielzyk-expensify commented Sep 19, 2024

shawnborton commented Sep 19, 2024

abekkala commented Sep 20, 2024

melvin-bot bot commented Sep 20, 2024

melvin-bot bot commented Sep 20, 2024

truph01 commented Sep 21, 2024 • edited by github-actions bot Loading

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 alternative solutions did you explore? (Optional)

truph01 commented Sep 21, 2024

suneox commented Sep 21, 2024

dubielzyk-expensify commented Sep 23, 2024

melvin-bot bot commented Sep 23, 2024

Nodebrute commented Sep 23, 2024 • edited Loading

Nodebrute commented Sep 23, 2024

suneox commented Sep 23, 2024

Nodebrute commented Sep 23, 2024

dubielzyk-expensify commented Sep 24, 2024

truph01 commented Sep 24, 2024

dubielzyk-expensify commented Sep 24, 2024

truph01 commented Sep 24, 2024

truph01 commented Sep 24, 2024

dubielzyk-expensify commented Sep 24, 2024

truph01 commented Sep 24, 2024

dannymcclain commented Sep 24, 2024

srikarparsi commented Sep 24, 2024

melvin-bot bot commented Sep 24, 2024

melvin-bot bot commented Sep 24, 2024

truph01 commented Sep 25, 2024

suneox commented Oct 7, 2024

Checklist

suneox commented Oct 8, 2024

abekkala commented Oct 11, 2024

PAYMENT SUMMARY:

abekkala commented Oct 11, 2024

m-natarajan commented Sep 12, 2024 •

edited by melvin-bot bot

Loading

ChavdaSachin commented Sep 12, 2024 •

edited by github-actions bot

Loading

Nodebrute commented Sep 13, 2024 •

edited

Loading

truph01 commented Sep 21, 2024 •

edited by github-actions bot

Loading

Nodebrute commented Sep 23, 2024 •

edited

Loading