[bug]: No property available to stack date and time picker fields vertically [column instead of row]

[TMSchipper]

What version of design-system are you using?

"@strapi/strapi": "^5.2.0",
"@strapi/design-system": "2.0.0-rc.11",

What's Wrong?

The date and time picker components in the Strapi Design System currently render in a single row, with no available property or option to display them stacked vertically. This causes layout issues, particularly in narrow side panels (such as the content manager sidebar), where the elements overflow beyond the container.

To Reproduce

Use the component in a small container (e.g., a sidebar).
Notice that the date and time fields are displayed inline (horizontally), leading to overflow issues.
There is no documented property to switch to a vertical layout.

Expected Behaviour

There should be a property (e.g., stacked or layout="vertical") to allow developers to control whether the date and time fields are displayed:

Horizontally (default behavior)
Vertically (one field below the other)
This would improve usability and allow for better responsive layouts.

[HichamELBSI]

Thanks again for the issue @TMSchipper, we will handle it as soon as possible.

[Adzouz]

Hi @TMSchipper, thanks a lot for reporting the issue 😊 I pushed a fix for the display issue you're having.
Can you go on the PR and confirm here that it's the behaviour you're looking for?
There's a video showing the responsiveness of the fields and putting them one on top of the other if there's not enough space (and to prevent the text from cutting).
Let me know!

[TMSchipper]

@Adzouz, thank you for updating the layout to be more responsive, when this update is released I can remove my inline styling! 🚀

I have only one suggestion: maybe a min-width of 130px for both fields is sufficient? With this smaller min-width, we automatically provide better support for smaller screens.

(The gap in the screenshot is 4px)

Again, thank you for your work and have a great day!

[Adzouz]

Hi @TMSchipper,
I tried to reduce the width to 130px but the thing is that we have a clear button that takes space and will crop part of the content unfortunately 😢 See my screenshot attached:

[TMSchipper]

@Adzouz Ah, I see, that’s indeed not ideal 😅
Thanks for the clarification!

Really appreciate your contribution once again!

Cheers

[Adzouz]

And thank you for your patience, I hope it will improve your experience a bit 🤞
Have a great day ☀️