S-date-field doesn't stretch to fill container width (unlike s-select, s-text-field)

Polaris
1

When using s-date-field inside an s-section or s-stack, it doesn’t stretch to fill the available width like s-select and s-text-field do. The input renders at a fixed width instead.

Reproduction:

<s-section heading="Settings">
  <s-stack gap="base">
    <s-select label="Status">
      <s-option value="draft">Draft</s-option>
    </s-select>
    <s-date-field label="End date" />
    <s-select label="List">
      <s-option value="">None</s-option>
    </s-select>
  </s-stack>
</s-section>

The two s-select fields fill the full width, but s-date-field does not.

Root cause: Inside the shadow DOM, .date-field-container is set to display: inline-block with a fixed inline-size: calc(7 * var(--p-width-800-25111)). This hardcodes the width to ~14rem instead of stretching to fill the parent.

Why there’s no workaround: The --p-width-* custom properties are shared between the input container and the date picker calendar grid. Overriding them (e.g. --p-width-800-25111: 14.2857%) makes the input full-width but breaks the calendar layout — day cells lose their spacing and stack on top of each other.

Expected: s-date-field should match the behaviour of other form components (s-select, s-text-field) and fill its container width by default. The .date-field-container sizing should use a separate token or just `width: 100% instead of reusing the calendar cell width token.

2

Anyone from the polaris team able to provide anything on this?

3

@Anthony_Frehner Apologies for the tag Anthony, but is this something that can be looked at?

Seems it should be a pretty simple fix on Shopify’s side.

5

Bumping this if it could be looked at please.

6

Hi @Luke

Thanks for flagging - we’re working some options for the best way to present this. I’ll post an update here again when we’ve shipped the improved experience.

7

Hi everyone,

We’re currently working on an Admin UI extension and have run into a few issues with the <s-date-field> web component. Thought I’d share in case others are experiencing the same.

  1. Fixed width – The component has a hardcoded width, so it doesn’t stretch to fit its container, and there’s no way for us to override it.

  2. Popover inside modals – When using <s-date-field> inside a modal (admin action extension), the calendar popover can render partially outside the screen on mobile devices. There’s no scrolling, so it can be impossible to select certain dates.

  3. Keyboard overlap on mobile – On mobile, the calendar popover can be overlapped by the on-screen keyboard, which makes interacting with it tricky.

It would be great if <s-date-field> could:

  • Stretch to fill its container like other form components (<s-text-field>, <s-select>)

  • Adjust popover positioning to stay fully visible in modals, even on mobile

  • Avoid being covered by the keyboard

image (1)
image (1)468×966 71.5 KB

8

We noticed one additional issue that seems to occur specifically on Safari.

It appears to be a Polaris bug related to the <s-date-field> web component. The component automatically controls whether the calendar is open or closed, and there doesn’t seem to be any available property (such as isActive) that would allow us to manage this behavior programmatically.

Recording: https://www.loom.com/share/093d554903d44ccbb9aef1317ae8eefa

9

Hey @Liam-Shopify, any updates here, this issue still persists and really impacts clean UI :sad_but_relieved_face:

CleanShot 2026-07-27 at 08.35.37@2x
CleanShot 2026-07-27 at 08.35.37@2x924×1152 29.9 KB

10

Hey Luke!

Thanks for flagging this is unresolved - digging into this on my side now.