🐛 Bug: Improve behaviour of Draft 2020-12 for mobile devices

[benjagm]

Describe the bug

The page with the release notes for draft 2020-12: https://json-schema.org/draft/2020-12/release-notes does not work well for mobile devices. The hold school tables producing a huge horizontal overflow.

Steps To Reproduce

1. Go to https://json-schema.org/draft/2020-12/release-notes
2. Use developer tools to navigate like a mobile
3. Check the unnecessary horizontal overflow

Expected Behavior

The ideal solution for me is a grid that when it reaches the breaking point converts that 1 row x 2 columns approach into a 2 rows x 1 column so we avoid the overflow to happen.

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

[DhairyaMajmudar]

@benjagm Shall I take this up : D

[Adity20]

@benjagm I test the changes the code was working fine for these components what extra you're looking forward to here

[DhairyaMajmudar]

Actually the website page is getting overflow in x direction which needed to be fixed.

[Adity20]

I fixed that issue too or maybe it will get fixed once the changes are applied to all the components.

[Adity20]

@benjagm I was going to fix this overflow issue too
So if it's fine for you I can work on this too as I know what changes need to be made for this
I'm done with one task assigned already so left with this one only

[VivekJaiswal18]

@benjagm Can I work on this issue!

[ayushtiwari110]

Hi there @benjagm !, I tried reproducing the bug but seems like the page isn't available on the production link. It's showing a 404 error.

[AdityaSingh-02]

@benjagm Can you please assign me this issue

[DhairyaMajmudar]

Also while inspecting the bug it was found that this buggy behaviour is visible in all the pages of specifications section.

[Adity20]

Yeah this is due to two different components for styling one jsonEditor and one styledMarkdown.

[Sahil-Shadwal]

I would like to work on this issue. I looked into it and the li and th is the major reason for that overflow if we make that responsive it will solve the whole issue.

[benjagm]

@Adity20 is fixing the problems with the code editor.

Hi there @benjagm !, I tried reproducing the bug but seems like the page isn't available on the production link. It's showing a 404 error.

Please try https://json-schema.org/draft/2020-12/release-notes

[benjagm]

@Adity20 is working on aligning the code components.

This issue is just to change the tables behaviour for mobile in the the page 2020-12/release-notes. @AdityaSingh-02 please go ahead with this one.