S-table: how do you apply list-variant-only cell styling without breaking horizontal scroll?

Polaris
1

I have an App Home index table built with s-table (default variant="auto", so it renders as a grid on wide screens and collapses to the stacked list layout at ~490px).

My numeric columns add trailing padding to their cells so the values line up under the header label rather than under the (hover-only) sort-button icon:

<s-table-cell>
  <s-box paddingInlineEnd="large">
    <s-stack direction="inline" justifyContent="end">{value}</s-stack>
  </s-box>
</s-table-cell>

That padding is correct in the table variant. But in the list variant the same padding pushes the value in from the right edge, so it no longer aligns with the other right-aligned values (SKU, etc.) in the card. I want the padding only in the table variant, and none once it collapses to a list.

What I tried

Wrapping the table in s-query-container and making the padding a responsive value keyed to the same 490px breakpoint:

<s-query-container>
  <s-table ...>
    {/* cells use: */}
    <s-box paddingInlineEnd="@container (inline-size <= 490px) none, large">...</s-box>
  </s-table>
</s-query-container>

This breaks the table: container-type: inline-size applies inline-size containment, so the table can no longer grow wider than the container and scroll horizontally — instead columns shrink and text wraps, and the built-in pagination stops rendering. Putting the query container anywhere that is an ancestor of the cells has the same effect, because the cells need an ancestor container and any such ancestor constrains the table’s width.

A per-cell query container (inside s-table-cell) avoids the scroll break, but then the query measures the cell’s own width, which doesn’t reliably indicate whether the table is in table or list variant.

Questions

  1. Is there a supported way to apply variant-aware styling to table cells (e.g. different paddingInlineEnd in table vs list variant) without disabling the table’s horizontal scroll?
  2. Does the table expose its computed variant to descendants in a way usable from markup/CSS (not just the JS computedVariant getter / onComputedVariantChange event)?
  3. Is there a recommended pattern for “this styling only applies in the list variant” on s-table-cell content?
  4. More broadly — is there any plan to let s-query-container provide a container context for responsive values without the inline-size containment that prevents a child table from scrolling?

For now I’ve removed the padding entirely (values are flush-right in both variants), which is fine, but I’d like to know the intended approach.

Environment

  • App Home, latest App Bridge + Polaris web components (loaded from cdn.shopify.com/shopifycloud/polaris.js)
  • React 18