DateField Component Rendering Incorrectly in UI Extensions for Admin

[agonsgd]

Environment:

• Latest chrome
• MacOS
• Dependencies

Description:
The DateField component's date picker popover is not rendering correctly within the UI Extensions for the Admin. The date picker appears cut off and is not fully visible, making it impossible to select some dates.

Steps to Reproduce:

1. Use the DateField component inside an InlineStack within the admin order-details block.
2. Click on the DateField to trigger the date picker.
3. Observe that the date picker's UI is truncated and not fully displayed on the screen.

Expected Behavior:
The date picker should render fully and be completely visible, allowing for any date to be selected without any part of the UI being cut off.

Actual Behavior:
The date picker UI is partially cut off on the screen, and some dates cannot be selected as they are not visible.

Code snippet:

<InlineStack inlineGap="base"> <DateField label="Expiration Date" selected={expiresAt} onChange={(value: string) => setExpiresAt(value)} disabled={disabledDates} /> </InlineStack>

Screenshots/Attachments:

Image

Additional Context:
The problem occurs when the DateField component is placed within a UI that has limited space or when it's positioned near the edge of a container, which may cause the date picker to be partially hidden. This issue has a significant impact on the user experience as it hinders the ability to select an expiration date for credit added to a customer.

[MartinHein-dev]

Same problem here

[MartinHein-dev]

@agonsgd Have you found any work arround for this?

[agonsgd]

@MartinHein-dev not yet sadly, it's still happening.