Mobile Dropdown Overflow Issue – Menu Rendering Outside Viewport

Issue Summary

Mobile UI Dropdown Overflow Issue (Left Side Out of View)

Dropdown menus (e.g., All Specializations, Search By, Select Camp) are overflowing outside the viewport on mobile devices and appearing off-screen on the left side.

Problem Statement

Dropdowns are not properly positioned in mobile view and extend beyond screen boundaries
Affects all mobile users (320px–768px)
Causes poor UX: options are partially hidden and hard to interact

Steps to Reproduce:

Open app in mobile view (320px–400px)
Click any dropdown (Specialization, Search By, Camp)
Observe dropdown going outside left side of screen

Proposed Solution

Fix dropdown positioning without changing existing functionality
Ensure dropdown stays within viewport

Approach:

Set parent container: position: relative
Set dropdown:

Acceptance Criteria

Scenario 1:

Given mobile screen
When dropdown is opened
Then it should be fully visible within screen

Scenario 2:

Given dropdown is clicked
Then it should align below trigger

Scenario 3:

Given dropdown is open
Then no horizontal scroll should appear

Scenario 4:

Given desktop view
Then behavior remains unchanged

Test Cases

Test ID	Description	Expected Result
TC-001	Open dropdown on mobile	Fully visible
TC-002	Alignment check	Properly aligned
TC-003	Scroll check	No horizontal scroll
TC-004	Desktop test	No change

Definition of Done

Notes

Issue seen in:
- Specialization dropdown
- Search dropdown
- Camp selection dropdown
Likely caused by incorrect absolute positioning or transform offset