Page web component (inlineSize=large on wider screens) heading misaligned

Polaris
1

There appears to be a Heading alignment layout bug on wider screens when utilizing the latest Polaris web component Page with inlineSize=“large”. Using the Polaris example code here Polaris Page web component and simply adding the attribute inlineSize=”large” illustrates the alignment issue. See the screenshot for rendering with heading text misaligned.

<s-page inlineSize="large" heading="Products" >
  <s-section>
    <s-text>Hello World</s-text>
  </s-section>
</s-page>

SCR-20260109-opjk-2
SCR-20260109-opjk-2449×165 7.87 KB

2

Using this example, I’m not able to replicate this issue. Can you reproduce it somehow?

https://codepen.io/afrehner/pen/RNRGzWm

3

Thanks for the CodePen example. This resolves the issue as our test was using a previously recommended app-bridge-ui-experimental.js instead of polaris.js. Updating to the latter makes the issue moot and solved. Thanks.

1 Like