StabilityNexus / StabilityNexus/Tectonic-EVM-WebUI
[BUG]: Fix mobile navbar scrolling and viewport overflow
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
Bug Description
The mobile navigation menu has a scrolling issue when opened on smaller screen sizes.
When the navbar is opened, the menu content can extend beyond the available viewport height. However, the user is unable to scroll through the opened navigation menu, making some of the content inaccessible.
Steps to Reproduce
- Open the Tectonic WebUI on a mobile or narrow viewport.
- Open the mobile navigation menu.
- Scroll down while the navigation menu is open.
- Notice that the menu/page cannot be scrolled properly.
Current Behavior
The mobile navigation menu can extend beyond the viewport, but scrolling is blocked. This prevents users from accessing content that is below the visible area.
Expected Behavior
The mobile navigation menu should remain fully accessible on smaller screens.
The menu should:
- Fit within the available viewport.
- Allow vertical scrolling when its content exceeds the viewport height.
- Prevent content from being hidden or inaccessible.
- Work consistently across mobile and tablet screen sizes.
- Maintain the existing navigation functionality and design.
Proposed Approach
- Review the mobile navbar's height and overflow behavior.
- Ensure the navigation container supports vertical scrolling when required.
- Handle viewport height correctly on smaller screens.
- Test the navbar across different mobile and tablet viewport sizes.
- Ensure opening/closing the navbar and page scrolling continue to work correctly.
Screenshots
Attached screenshots demonstrate the mobile navigation menu and the scrolling issue.
Environment
- Device: Mobile / Responsive viewport
- Browser: Chrome
Steps to Reproduce
No response
Logs and Screenshots
No response
Environment Details
No response
Impact
Critical - Application is unusable
Code of Conduct
- I have joined the Discord server and will post updates there
- I have searched existing issues to avoid duplicates
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the mobile navbar component and its responsive styles, then reproduce the issue in Chrome at narrow mobile and tablet viewport sizes. Verify that an opened menu scrolls vertically when its content exceeds the viewport, while opening, closing, page scrolling, navigation behavior, and the existing design remain intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100