feat: make splitpanes responsive for minimal breakpoint

[kmelve]

Description

This PR makes the Vision plugin somewhat more responsive for narrow(er) screens by:

• Tuning the responsive grid column values so the 3-4 option boxes collapse more neatly
• Adjust the vertical/horizontal props and sizing to the split panes so they change direction beneath the narrowest breakpoint (600px).

This is useful when you want to test a query on mobile or with a narrow studio in a browser‘s split pane. The balance between the query/param/results panes could probably be tuned a tiny bit more, but it's at least functional.

What to review

I did try to see if there was a way to reuse the Sanity UI logic to get the breakpoints but ended up doing a simple window.innerWidth < 600 wrapped in the narrowBreakpoint() function.

Notes for release

Responsive improvements to the Vision plugin to accommodate narrower screens.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview		Sep 6, 2023 1:38pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 6, 2023 1:38pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Sep 6, 2023 1:38pm

[github-actions]

Component Testing Report Updated Sep 6, 2023 1:35 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	8s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	8s	3	0	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	10s	6	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	12s	9	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	45s	18	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	10s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	6s	3	0	0

[bjoerge]

Nice - thanks @kmelve!

[sjelfull]

Thanks, LGTM!