How to Center Footer When Using s-page Component with slot="aside"

[jaymit_b]

I’m using the s-page web component in my Shopify embedded app and adding content to the slot="aside" for the sidebar. I’m also trying to add a footer at the bottom of the main layout.

Since there’s no dedicated footer component available like in the Polaris React package, I’m manually inserting a footer inside the s-page component. However, the footer is not being horizontally centered on the page — it appears misaligned, especially when the aside slot is active.

I’ve attached a reference image to better illustrate the layout issue.

Has anyone faced a similar problem or found a workaround for manually centering the footer within the s-page structure? Any suggestions or best practices for placing a custom footer would be really helpful.

Thanks in advance!

// ===
// Details page pattern
// ===

export default function DetailsPage() {
  const handleFormReset = (event) => {
    console.log("Handle discarded changes if necessary");
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const formEntries = Object.fromEntries(formData);
    console.log("Form data", formEntries);
  };

  return (
    <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
      <s-page>
        {/* === */}
        {/* Title Bar */}
        {/* Note: ui-title-bar requires AppBridge to render correctly */}
        {/* === */}
        <ui-title-bar title="Mountain view">
          <button variant="breadcrumb" href="/app/puzzles">
            Puzzles
          </button>
          <button>Duplicate</button>
          <button tone="critical">Delete</button>
        </ui-title-bar>
        {/* === */}
        {/* Puzzle information */}
        {/* === */}
        <s-section heading="Puzzle information">
          <s-grid gap="base">
            <s-text-field
              label="Puzzle name"
              name="name"
              labelAccessibilityVisibility="visible"
              placeholder="Enter puzzle name"
              value="Mountain view"
              details="Players will see this name when browsing puzzles."
            ></s-text-field>
            <s-text-area
              label="Description"
              name="description"
              labelAccessibilityVisibility="visible"
              placeholder="Brief description of your puzzle"
              value="A beautiful mountain landscape puzzle"
              details="Help players understand what your puzzle features"
            ></s-text-area>
            <s-money-field
              label="Price"
              name="price"
              labelAccessibilityVisibility="visible"
              placeholder="0.00"
              value="9.99"
              details="Set the price for this puzzle"
            ></s-money-field>
            <s-url-field
              label="Reference image URL"
              name="reference-image-url"
              labelAccessibilityVisibility="visible"
              placeholder="https://example.com/image.jpg"
              details="Optional link to original image"
            ></s-url-field>
          </s-grid>
        </s-section>

        {/* Use the aside slot for sidebar content */}
        <s-box slot="aside">
          {/* === */}
          {/* Puzzle summary */}
          {/* === */}
          <s-section heading="Puzzle summary">
            <s-heading>Mountain view</s-heading>
            <s-unordered-list>
              <s-list-item>16-piece puzzle with medium difficulty</s-list-item>
              <s-list-item>Pieces can be rotated</s-list-item>
              <s-list-item>No time limit</s-list-item>
              <s-list-item>
                Current status:{" "}
                <s-badge color="base" tone="success">
                  Active
                </s-badge>
              </s-list-item>
            </s-unordered-list>
          </s-section>
        </s-box>

        <s-box>
          <s-stack direction="inline" justifyContent="center">
           © Copyright 2025
          </s-stack>
        </s-box>
      </s-page>
    </form>
  );
}