[Bug] Horizontal ScrollBox on the Customer Account page does not work

Extensions
1

Bug

Horizontal ScrollBox on the Customer Account page does not work — content that is wider than the viewport should be horizontally scrollable but is not.

Environment / Reproduction

you can check my demo repository here .

export function HorizontalScrollBoxBug() {
  return (
    <s-scroll-box id="my-scroll-box">
      <s-box
        id="my-very-wide-box"
        border="base base solid"
        minInlineSize="1000px"
      >
        <s-paragraph>
          You should failed to see the right border of the `s-box` in a narrow
          browser window. Please see the readme.md file for more details.
        </s-paragraph>
      </s-box>
    </s-scroll-box>
  );
}

  • The extension’s target: customer-account.page.render

  • Viewport width during test: 414 px

  • Page extension root: s-scroll-box (id="my-scroll-box")

  • Child of s-scroll-box: s-box (id="my-very-wide-box") with minInlineSize="1000px" to simulate wide content

  • In Customer Account UI: the scroll box has two ancestor wrappers (wrapper A and wrapper B) with widths 414 px and 1024 px respectively. These wrappers are not controllable by extension developers. See attached screenshot:

    customer-account-ui-extension-scrollbox-issue
    customer-account-ui-extension-scrollbox-issue1411×1026 57.4 KB

Expected vs Actual

  • Expected: wrapper B should follow wrapper A’s width so that the ScrollBox is constrained and can show a horizontal scrollbar.
  • Actual: wrapper B expands to fit its descendant content width (same for my-scroll-box), so no horizontal scrollbar appears. Setting min-inline-size or inline-size to 100% on the scroll box has no effect.

Scope

The same behavior occurs on a production store using React UI extensions (ScrollBox used to work there; the issue appeared recently). So this is not limited to the dev store with Preact + Polaris Web Components.

Conclusion

This is likely caused by a recent layout/style change in how Shopify renders Customer Account UI for all stores, which indirectly breaks horizontal scrolling for ScrollBox.

Extra note

If you set s-box (id="my-very-wide-box") with minInlineSize="1500px" instead of "1000px", you will always see a scrollbar in both wide and narrow windows, but you still cannot see the full scrollbar and the box’s right border in a narrow window. See the attached screenshot:

customer-account-ui-extension-scrollbox-issue2
customer-account-ui-extension-scrollbox-issue2785×225 11.2 KB

2

Hey @Reed_Lu , I think I was able to replicate this, thanks for flagging. Just to confirm, is it that the scroll box itself fails to offer a scroll bar at all or that the scrollbar doesn’t appear when you narrow your browser window (not seeing one at all is expected)? I’m seeing the latter, so just wanted to confirm if that’s what’s happening for you too - happy to look into this internally though. Here’s what I’m, seeing:

image
image985×739 25.8 KB

Hope to hear from you soon!

3

Thanks for looking into this. @Alan_G

First, I’d like to reiterate the following points:

  1. My original post described two exceptional cases(let’s call them case A and case B
    • I provided screenshots for both exceptional cases.
    • I briefly outlined the case B in the “Extra Note” section.
  2. I intentionally added a border to the content box(id=my-very-wide-box). If we cannot see the right border of the content box within the browser viewport due to no available scroll bar, or if we cannot see this right border even after scrolling the horizontal scrollbar, it means that s-scroll-box is not functioning properly.

Your screenshot matches the case A I mentioned, the right border of the content box is not visible and there is no scroll bar. (you are under a 900px narrow window, the content box’s width is 1000px)

I didn’t quite understand that part of what you said :backhand_index_pointing_down:. Aren’t the two situations you described actually the same thing? And it seems that you think your screenshot is showing a expected correct case? I do not get your point.

is it that the scroll box itself fails to offer a scroll bar at all or that the scrollbar doesn’t appear when you narrow your browser window (not seeing one at all is expected)?

4

Hey @Reed_Lu no worries! And yes, I should have clarified, tmy screenshot is showing the same case A you described, so I was able to reproduce the issue on my side. I was drawing a distinction around scrollbar visibility that was a bit unclear there, but I think the important part is that the full width of the content isn’t reachable, which isn’t expected. I’m going to raise this internally and will follow up here if I have an update. Appreciate you flagging this!

1 Like