bcgov / bcgov/foi-flow

UI Issue - Scroll Bar Not Visible Due to Page Length

Open
#4,102 1 comment 0 reactions 0 assignees View on GitHub
bug low priority
Dominant language
Python
Stars
8
Forks
2
Avg merge
14h 34m
Merged PRs (30d)
46

Description

**Describe the bug in current situation**

The page length is causing issues with the scroll bar being hidden behind the FOI Mod header.

For example, when there are a large volume of records in the Records tab, the scroll bar becomes so minimized that it is hidden behind the FOI Mod header. This is technically a UI issue affecting all FOI Mod (e.g., FOI Mod header is superimposed over the scroll bar), but it is only an issue due to the page length that can occur from large records packages in the Records tab.

See FOR-2023-30469 in PROD as an example of very large package, FOR-2023-32152 in PROD for a smaller one that still has the UI issue.

**Link bug to the User Story**

**Impact of this bug**

Low

**Chance of Occurring (high/medium/low/very low)**

Low

**Pre Conditions: which Env, any pre-requesites or assumptions to execute steps?**

Occurs when approx. >40 records in Records tab

**Steps to Reproduce**
Steps to reproduce the behavior:
1. Go to a request with > 40 records in the Records tab
2. Click on the Records tab, and ensure you are at the top of the page
3. Note the scroll bar is not visible
4. Scroll down the page, and eventually the scroll bar will appear from behind the page header

**Actual/ observed behaviour/ results**

Scroll bar is hidden behind page header. when perhaps it could begin after the page header element

**Expected behaviour**
GIVEN a user is in FOI Mod, on any screen
WHEN a scroll bar is an active element on the screen
THEN the scroll bar should be displayed in its entirety, underneath the page header

**Screenshots/ Visual Reference/ Source**
If applicable, add screenshots to help explain your problem. You an use screengrab.

Top of the Records Tab on FOR-2023-30469, no scroll bar displayed.

![image.png](https://images.zenhubusercontent.com/636ac0ea6aad1b5dd6b181ee/d922a2df-e062-4175-98ea-f1b54dd3a7e3)

Scrolling down through the records, scroll bar appears.

![image.png](https://images.zenhubusercontent.com/636ac0ea6aad1b5dd6b181ee/5763ded0-2297-457d-bb86-d8e8ddf12863)

Contributor guide

Open the contributing guide

Research direction

Start in the Records tab using a request with more than 40 records, such as FOR-2023-30469 or FOR-2023-32152, and reproduce the hidden scrollbar at the top of the page. Inspect the page header and scrolling behavior; done means the scrollbar remains fully visible underneath the header throughout the page.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.