StabilityNexus / StabilityNexus/Tectonic-EVM-WebUI

[BUG]: Fix mobile navbar scrolling and viewport overflow

Open
#33 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

  1. Open the Tectonic WebUI on a mobile or narrow viewport.
  2. Open the mobile navigation menu.
  3. Scroll down while the navigation menu is open.
  4. 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

Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.