🐛 Bug: Indentation problems with JsonEditor component

[benjagm]

Describe the bug

We had issues in the past with the JsonEditor component in small devices because it produced horizontal overflow. For this reason we needed to disable the wrapLines and wrapLongLines attributes in this commit cd30786 but this is producing unexpected indentation issues like the one discussed here.

The component is this one:
https://github.com/json-schema-org/website/blob/main/components/JsonEditor.tsx

The solution we expect is enable wrapLines and wrapLongLines and add a horizontal scroll bar in component so we producer the best developer experience in all code snippets.

Steps To Reproduce

Any page with code snippets in mobile devices.

Expected Behavior

Horizontal scroll bar at the bottom of the component.

Screenshots

No response

Device Information [optional]

- OS:
- Browser:
- version:

Are you working on this issue?

No

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

No

[Adity20]

@benjagm I'll start working on this right away.

[benjagm]

Thanks @Adity20 !!

[Adity20]

@benjagm jsonc format is causing some formatting issue with this component. I am done with all changes for other components and the overflow issue also but there is some issue with this code component.

[benjagm]

Thanks!! Please submit the PR and I'll take a look.

[Adity20]

Okay @benjagm

[benjagm]

Closed in favour of #560