[UI] Horizontal scrolling, Dropdown and Table of Content button issue on small devices

[Muhammed-Moinuddin]

Description

Horizontal scrolling issue (creating space on right side of screen), Dropdown not visible and Table of Content button not clicking/working on small devices

Expected Behavior

There should be not any horizontal scrolling (no-space on right side of screen), Dropdown should be visible(with proper working) and Table of Content button should be clickable and working.

Screenshots

https://github.com/user-attachments/assets/0da92dfa-27e6-4f46-a50c-5cc288ebb383

I will work on this issue.

Environment:

• Host OS: Ubuntu
• Browser: Chrome

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[github-actions[bot]]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.

---

        Be sure to join the community, if you haven't yet and please leave a :star: star on the project :smile:

[github-actions[bot]]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.

---

        Be sure to join the community, if you haven't yet and please leave a :star: star on the project :smile: