[HOLD for payment 2023-10-02] [$500] Settings - Help -User can not scroll to to the bottom of the page.

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1.Login and then open Settings.
2. open help.
3. tap on search icon.
4. type in the search field. I have entered "other" in it,
5. When the search list shows up try to scroll down , it stuck after a little scroll, User can not go though the whole list.

Expected Result:

User should see through whole list.

Actual Result:

User gets stuck while scrolling the list.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.69-0

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

Notes/Photos/Videos: Any additional supporting documentation

Screenrecorder-2023-09-02-19-11-49-788.1.mp4

Screen_Recording_20230913_180654_Chrome.mp4

Expensify/Expensify Issue URL:

Issue reported by: @Harshizonnet

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693664400580059

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a29391c5d4456b92
• Upwork Job ID: 1701980015607357440
• Last Price Increase: 2023-09-13
• Automatic offers:
• ntdiary | Reviewer | 26722324
• Harshizonnet | Reporter | 26722326

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[imranaalam]

---

Problem Statement:
Upon logging in and navigating to Settings, when a user accesses the help section and initiates a search (for instance, by entering "other"), the resulting search list becomes unresponsive after a brief scroll. This behavior prevents users from viewing the entirety of the search results. The expected behavior is for users to be able to seamlessly scroll through the full list without any hindrance. As of now, there is no known workaround for this issue.

---

Root Cause:
On the Android platform, the last item in the search list is partially obscured by the bottom bar, leading users to believe the list is truncated. Verification on Windows Chrome has confirmed that the last item displayed on Android is the final list entry, but it's not fully visible.

Proposed Solution:
Introduce additional padding at the end of the search list specifically for the Android platform to ensure that the last item is fully visible above the Android bottom bar.

Alternative Solution:
Re-evaluate the mobile-responsive design elements of the search list on Android. Consider adjusting the overall layout to ensure all items, including the last one, are fully visible.

---

[imranaalam]

---

Problem Statement:
On Android devices, when users access the search functionality and try to view the results, the last item in the list is partially obscured by the Android bottom navigation bar. This behavior makes it appear as though the list is truncated and prevents users from viewing the entire content.

Root Cause:
The web content is rendered in such a way that the total height of the content, including the search results, extends to the bottom edge of the viewport. As a result, the Android bottom navigation bar overlaps with the final items, obscuring them from view.

Proposed Solution:
Adjust the padding or margin at the bottom of the content container (or the search results container) to account for the height of the Android bottom bar. This additional spacing will ensure the last item in the list is fully visible above the Android bottom bar.

#content-area {
    padding-bottom: 60px; /* or an appropriate value based on the average height of the Android bottom bar */
}

Alternative Solutions:

1. Use a Sticky Footer:
   Design the footer to always stick to the bottom, pushing the content upwards. This ensures that even if users scroll down, the content remains above the bottom bar.

2. Dynamic Resizing with Event Listeners:
   Attach a resize event listener to the window. If the height changes without a corresponding change in width (indicating the appearance or disappearance of the navigation bar), adjust the content's bottom padding.

3. Progressive Web App (PWA) Approach:
   If this is a Progressive Web App, consider using a display: standalone or display: fullscreen property in the web app manifest. This ensures the content is displayed in a standalone or fullscreen mode, respectively, reducing browser UI obstructions.

4. Mobile-specific Styles:
   Use media queries to apply specific styles for mobile devices, ensuring that the content is always above the bottom bar:

@media (max-width: 600px) { /* or other breakpoint for mobile devices */
    #content-area {
        padding-bottom: 60px;
    }
}

5. Feedback-driven UI Adjustment:
   Integrate a feedback mechanism where users can report UI issues. Use this feedback to gather data on devices where the problem persists and fine-tune the solution for those specific devices.

6. Test with Different Mobile Browsers:
   The issue might not be consistent across all mobile browsers. Testing on different browsers (like Firefox, Samsung Internet, etc.) can provide insights into whether the problem is browser-specific and if certain browsers have built-in solutions.

---