[joy-ui][Card] Make orientation Responsive

[MonstraG]

Summary

I ended up in a situation where doing this:

<Card orientation={{xs: "vertical", md: "horizontal"}}>
	<NarrowContent/>
	<Divider />
	<WideContent/>
</Card>

would achieve result I want, that's about it.

Whilst writing this I thought that I would do it like I used to with useMediaQuery but turns out it's not in joy - #35037, so I guess I'll copy-paste content and display-hide/block it for now.

update: tried to extract content into it's own <MyCardContent/>:

<Card orientation="horizontal" sx={{ display: { xs: "none", md: "flex" } }}>
	<MyCardContent />
</Card>
<Card orientation="vertical" sx={{ display: { xs: "flex", md: "none" } }}>
	<MyCardContent />
</Card>

and that kinda failed because <Divider/> stopped behaving because it's no longer a direct child of Card, I'm kind of at a loss what to do.

Examples

No response

Motivation

No response

Search keywords: joy card orientation vertical horizontal responsive mobile desktop

[MonstraG]

If it turns out this is easy to do, then a good idea would be to update all orientations for all components that have them.

[ZeeshanTamboli]

Would adding the useMediaQuery hook to MUI System resolve your problem? See PR #39463 for #35037 fix.

[MonstraG]

Technically yes, but the just like the other times in this PR, a css only solution is still preferred.

[ZeeshanTamboli]

I'll add the "waiting for upvotes" label.

[emulienfou]

Having the same issue for the <List> component.
Would be nice to have the prop orientation handling responsive parameters like <List orientation={{xs: "vertical", md: "horizontal"}}> and same for all other components.

Also using useMediaQuery in some context with Next.js framework, this means your component needs to have use client instead of been a React server-component by example!