[style]: Improve Breakpoints and Fix UI Overlap of Hamburger Menu and Dark Mode Toggle

[rajveeerr]

What's the style idea?

There are some responsiveness issues at certain screen sizes where the UI appears janky. Specifically, the Hamburger Menu and the Dark Mode Toggle are overlapping, which causes usability issues.

Problem:

• The UI doesn’t scale well on all screen sizes, leading to a janky appearance.
• The Hamburger Menu and the Dark Mode Toggle overlap at some breakpoints, making them hard to interact with.

Expected Behavior:

• Implement better breakpoints so that the UI looks consistent and smooth across all screen sizes.
• The Hamburger Menu and Dark Mode Toggle should have proper spacing and never overlap, regardless of screen size.

Steps to Reproduce:

1. Open the website on different screen sizes (between mobile and tablet sizes).
2. Notice that the UI becomes janky and the Hamburger Menu overlaps with the Dark Mode Toggle.

Impact:

• This affects the usability and visual appeal on some screen sizes, causing difficulty in accessing menu options and toggling dark mode.

Checklist:

• [x] I have checked the existing issues to avoid duplicates.
• [x] I have followed the contributing guidelines.

Add screenshots

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Hello @rajveeerr! Thank you for raising this issue.

Please make sure to follow our Contributing Guidelines. Don't forget to ⭐ our Imagine AI.

Our review team will carefully assess the issue and reach out to you soon! We appreciate your patience!

[github-actions[bot]]

To reduce notifications, issues are locked. Your issue will be unlocked when we add the label, gssoc23.

[SurajPratap10]

@rajveeerr don't assign labels to your own opened issues as eventually while merging I'll only assign the labels and those will only count. You can assign labels to issues of other folks just don't self assign rest Looks Good, Go Ahead with it✨

[rajveeerr]

Got it, sir! Just one thing—are we talking about the gssoc-extd and hactoberfest-accepted labels, or just the level ones?

[SurajPratap10]

@rajveeerr any label just don't self assign as it doesn't look professional to assign labels to ur own opened issues right. You can give labels to issues of contributors though👍