How to render full width components above an aside component with s-page - web components

[21O]

In the previous version of Polaris (before web components) it was possible to use the <Layout> component to structure pages into thirds. You could, for example, have a full width banner at the top of the page, and then divide the page below into 2 thirds and 1 third, e.g.:

    <Page
      title="Billing"
      compactTitle
    >
      <Layout>
        <Layout.Section>
          <Banner
              title={`You have exceeded your current plan usage`}
              tone="critical"
            >
              ...
            </Banner>
        </Layout.Section>
        <Layout.Section>
          ...
        </Layout.Section>
        <Layout.Section variant="oneThird">
          <Card roundedAbove="sm">
            ...
          </Card>
        </Layout.Section>
      </Layout>
    </Page>

However, with the new Polaris web components, you need to use the aside slot on a page to split the page into 2 thirds and 1 third:

      <s-page heading="Billing">
        <s-banner>Test</s-banner>
        <s-link slot="breadcrumb-actions" href="/app">Home</s-link>
        <s-section>
          ...
        </s-section>
        <s-box slot="aside">
          ...
        </s-box>
      </s-page>

Which results in the banner being squahed into the 2 thirds - as opposed to be streched across the full width of the container, above the rest of the content:

If you move the banner outside of the page, you lose the container padding:

    <s-stack gap="base">
      <s-banner>Test</s-banner>
      <s-page heading="Billing">     
        <s-link slot="breadcrumb-actions" href="/app">Home</s-link>
        <s-section>
          ...
        </s-section>
        <s-box slot="aside">
          ...
        </s-box>
      </s-page>
    </s-stack>

I’m strugging to find a component that automatically applies the page/container padding that is applied in the s-page component. I’ve looked at s-grid, but it looks as though I’d have to specify the responsive inlinePadding values to match the s-page padding, which just seens absurd.

Can somebody point me in the direction of how we should be rendering components above an asidecomponent?

[bakura10]

The same issue happens for buttons. If you want to have a “Save” button aligned on the right after the page (like all pages of Shopify admin), this is not possible.

[21O]

I solved my issue by using an s-grid and removing aside:

    <s-page heading="Billing">
      <s-link slot="breadcrumb-actions" href="/app/">Home</s-link>
      <s-grid
        gridTemplateColumns="repeat(3, 1fr)"
        gap="base"
        justifyContent="center"
      >
        <s-grid-item gridColumn="span 3">
          <s-banner
              heading='You are not subscribed to any plan'
              tone="critical"
            >
              ...
            </s-banner>
        </s-grid-item>
        <s-grid-item gridColumn="span 2">
          // main content
          ...
        </s-grid-item>
        <s-grid-item gridColumn="span 1">
          // aside content
          ...
        </s-grid-item>
      </s-grid>
    </s-page>

It’s frustrating that there’s not a solution built into the s-page component.

[Anthony_Frehner]

We’re looking into our options here; for now, that’s a great workaround. Thanks!