When putting a s-date-field inside an s-modal, the date picker popover appears way off under the action buttons. It’s impossible to scroll down unless you use the random scroll bar that appears.
<s-modal id="edit-expiration-modal" heading="Edit expiration">
<fetcher.Form method="post" ref={formRef}>
<s-date-field
label="Expiration date"
name="expires_at"
value={expires_at.split("T")[0]}
required
/>
</fetcher.Form>
<s-button slot="secondary-actions" commandFor="edit-expiration-modal" command="--hide">
Close
</s-button>
<s-button
slot="primary-action"
variant="primary"
onClick={() => formRef.current?.requestSubmit()}
>
Save
</s-button>
</s-modal>
This is for an app embedded page. I did a similar popup in the past for an admin extension and it was working fine (though it wasn’t with the web components yet so I don’t know if the web components have the same issue in admin extensions). Here’s what it looked like in the past for date pickers in admin extensions:
