✨ Enhancement: Improve Code Block Visibility on Mobile View – Suggest Expand/Collapse Option

[chauhan-varun]

Is your feature request related to a problem? Please describe

I noticed that when viewing the documentation pages on a mobile device, many code blocks are cut off horizontally and not fully visible without side-scrolling. This makes it difficult to read JSON examples properly.

Screencast.from.2025-06-15.19-23-38.webm

Code block is clipped, hard to read without side-scrolling.

In contrast, Microsoft Learn implements a much more user-friendly experience by adding an “Expand” or expandable code area, making it easier to view full content even on smaller screens.

Describe the solution you'd like

Example from Microsoft Learn:

Screencast.from.2025-06-15.19-24-02.webm

Suggestion:

Add an expand/collapse button or a full-width overlay view for code blocks, especially on mobile, to enhance readability and overall user experience.

Benefit:

• Easier to consume JSON samples on mobile
• Consistent with modern documentation standards
• Better accessibility and UX

Thank you for considering this improvement!
I'd love to work on this issue if it is approved

Are you working on this?

Yes

[Tosifkankod]

I'm working on this issue.

[Tosifkankod]

I'll try to do something similar like the solution of microsoft's one mention in the issue.

[chauhan-varun]

@Tosifkankod I propose the issue i already completed the issue I'm waiting for mentor to approve this so that I can create a pr

[idanidan29]

@chauhan-varun I think the current implementation is solid, this is the standard way of presenting code snippets on most major websites (like Stack Overflow, ShadCN and Microsoft) for mobile. What alternative solution are you suggesting?

Also, we need to keep in mind that the structure of the snippet must remain the same, this is important for working with schemas