ayush585 / ayush585/edgex

[BUG]: Incomplete Mobile Navigation – Features Truncated on Small Screens

Open
#68 5 comments 0 reactions 1 assignee Claimed by @Yash-Jain2006 View on GitHub
GSSoC 25 level 3 UI
Dominant language
JavaScript
Stars
13
Forks
36
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
In the mobile version of the EDGE**x** website, the sidebar navigation cuts off some of the feature items (e.g., “VoiceFeedback” & "Resource Valut"), preventing users from seeing or accessing them easily. This creates a poor user experience on small devices.

**Steps To Reproduce**
Steps to reproduce the behavior:
1. Open the site on a mobile device or emulator.
2. Open the sidebar menu.
3. Observe that lower menu items are not fully visible or accessible.

**Expected behavior**
All navigation items should be fully visible on mobile, either by fitting within the screen or by allowing vertical scroll.

**Proposed Solution**
- Apply `overflow-y: auto` and `max-height: 100vh` to the sidebar container.
- Ensure layout is mobile-friendly using media queries.
- Test on real devices and emulators to ensure all items are visible and scrollable.

**Screenshots**
📱 Mobile View (Issue visible):

![Image](https://github.com/user-attachments/assets/b31f5658-53ee-455c-a158-0e1bb56c4f49)

💻 Desktop View (Expected behavior):

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.