[UI] Docs layout breaks when browser zoom is increased

[rishiraj38]

Description

When the browser is zoomed in, the documentation layout breaks. The left navigation sidebar overlaps the main content, causing parts of the page to become hidden and making the documentation difficult to navigate.

Steps to Reproduce

1. Open any page in the Layer5 Docs.
2. Increase the browser zoom level.
3. Observe the page layout.

Expected Behavior

The layout should remain responsive, with the sidebar and main content adjusting correctly without overlapping.

Actual Behavior

• The left navigation sidebar overlaps the main content.
• Parts of the content become hidden.
• The page becomes difficult to navigate and read.

Screenshot

Environment

• Host OS: Mac Linux Windows
• Browser: Chrome Safari Firefox Edge Opera

---

Contributor Guide and Resources

• 📚 Instructions for contributing to documentation
  • Layer5 documentation site and source
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

[KumarNirupam1]

Hi @rishiraj38 I'd like to work on this issue

[Sathwik-parimi-07]

Hii @rishiraj38, could you please assign this to me?

[Himanshujha7]

Hi @rishiraj38
Kindly assign this to me.
I have tested the behaviour and believe the behaviour persists because of the UI breakpoint not optimize for different screen ratios.
Will need to check in codebase as well to confirm.
Could you please assign?

[karthik-51]

@rishiraj38 i want to work on this.Could please assign it to me !!