Fix mobile dropdown overflow and alignment issue
Overview
This MR fixes the dropdown misalignment issue in mobile view across admin pages where dropdown menus were rendering outside the viewport (left side), causing poor user experience.
What does this MR do and why?
This MR resolves a UI bug where dropdown components (Specialization, Status, Search By, Camp selection) were not properly aligned with their trigger elements in mobile view.
- Dropdowns were shifting to the left and going outside the screen
- Users could not properly see or interact with options
- UI appeared broken on mobile devices
Fix ensures dropdowns are correctly anchored to their trigger elements and remain within screen bounds.
Changes Made
-
Fixed dropdown alignment in:
- Queue Management page
- Manage Medicines page
- Patient Profiles page
- Camp Analytics page
-
Ensured dropdown opens directly below input/select
-
Prevented overflow outside viewport in mobile view
-
Maintained existing functionality and desktop behavior
Technical Details
- Root cause: Dropdown was positioned relative to the wrong container
- Fix: Corrected positioning logic so dropdown aligns with trigger element
- Removed unintended left offset in mobile view
Type of Change
-
🐛 Bug fix -
🎨 UI/UX improvement
Related Issues / References
Screenshots
Before
Dropdown shifted left
Partially hidden
After
Properly aligned dropdown
Fully visible
How to Validate
-
Run project:
bun dev -
Open mobile view (320px–400px)
-
Test dropdowns in:
- Queue Management
- Manage Medicines
- Patient Profiles
- Camp Analytics
-
Verify:
- Proper alignment
- No overflow
- Fully visible
Testing Done
-
Manual testing completed
Result
- Dropdown opens below trigger
- No left overflow
- Fully visible on mobile
- Desktop unchanged