Skip to content

Conversation

@mdrafi28
Copy link
Contributor

@mdrafi28 mdrafi28 commented Nov 8, 2025

#499
resolves #531

Description

This PR resolves the issue where the mobile dropdown menu wasn’t appearing between 768px and 1023px due to incorrect breakpoint usage (md:hidden instead of lg:hidden). The menu is now properly visible for all widths below 1024px.

before

dbf.mp4

after

daf.mp4

And also

While testing this fix, I also noticed an inconsistency where reopening the header after resizing caused the menu to stay open. I addressed this by adding a resize listener that automatically closes the mobile menu when the window width exceeds 1024px, ensuring consistent behavior across viewport changes.

before

sbf.mp4

after

saf.mp4

Changes done

  • Updated breakpoint classes from md:hidden → lg:hidden for the mobile overlay and drawer
  • Added useEffect listener to reset isMobileMenuOpen and activeDropdown when window width ≥ 1024px

@github-actions
Copy link

github-actions bot commented Nov 8, 2025

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow Status Details
🔨 Continuous Integration ✅ Passed Build completed successfully
📝 Code Linting ✅ Passed All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

@mdrafi28
Copy link
Contributor Author

mdrafi28 commented Nov 8, 2025

hey @sa-fw-an can u review this ?

@rahul-vyas-dev
Copy link
Contributor

Is this issue still open and available for contribution?

@mdrafi28
Copy link
Contributor Author

mdrafi28 commented Nov 9, 2025

Is this issue still open and available for contribution?

Hey @rahul-vyas-dev , I have already submitted a PR that resolves this issue successfully as you can see in uploaded videos. Once it gets merged this one will be marked as complete. feel free to explore other issues for contribution.

@rahul-vyas-dev
Copy link
Contributor

Is this issue still open and available for contribution?

Hey @rahul-vyas-dev , I have already submitted a PR that resolves this issue successfully as you can see in uploaded videos. Once it gets merged this one will be marked as complete. feel free to explore other issues for contribution.

Thanks for the update!
Got it — I’ll explore other open issues for contribution.
Appreciate your work on this one!

@sa-fw-an sa-fw-an merged commit 65950da into sugarlabs:main Nov 15, 2025
3 checks passed
@mdrafi28 mdrafi28 deleted the fix-dropdown-visibility branch November 15, 2025 15:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mobile dropdown not visible between 768px–1023px screen widths

3 participants