fix: mobile layout breaks with sidebar overlap and horizontal overflow in Studio

[Harsheetsharma]

Bug description

On mobile devices, the Studio layout breaks due to improper responsive handling.

Multiple issues are observed:

• Sidebar overlaps main content
• Content is pushed under the sidebar
• Page overflows horizontally (scrolls to the right)
• UI appears stretched and congested

---

Steps to reproduce

1. Open https://studio.asyncapi.com on a mobile device (or DevTools mobile view)
2. Navigate to any section (e.g. Operations)
3. Open sidebar or interact with navigation
4. Observe layout issues

---

Current behavior

• Sidebar does not collapse properly
• Main content is partially hidden
• Horizontal scroll appears
• Layout breaks visually

---

Expected behavior

• Sidebar should behave as overlay or collapse properly
• Content should remain fully visible
• No horizontal overflow
• Layout should be responsive on mobile

---

Screenshots

---

Possible cause

• Missing responsive breakpoints
• Incorrect container width (likely 100vw or fixed width)
• Sidebar not handled properly for mobile layout

---

Contribution

I can work on this issue and submit a PR.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.