Preview windows that opened off to the side

A merchant sent us a screenshot: they clicked a section to read more about it, and the preview opened jammed against the right edge of the app, with the whole right-hand column (the description, the install button) off the screen entirely. It happened every time, in two different browsers.

What was going on

Every window of this kind in the app is Shopify's own modal component, and it centres itself using a value that Shopify's code fills in. On this merchant's machine that value never arrived.

The way CSS handles a missing value here is unforgiving: it does not fall back to something sensible, it throws the whole instruction away. So the modal kept the first half of its positioning and lost the second, which parks it with its left edge on the middle of the screen. That is exactly what the screenshot showed, and nothing else produces it.

We cannot see why the value failed to arrive on their machine, and we may never be able to. So we stopped trying to.

What we changed

The app now measures each of these windows just after it opens, and again if you resize. If it is centred, nothing happens at all. If it is not, the app works out the exact correction needed from the window in front of it and applies that.

Two details worth stating, because both were mistakes we made first and caught by measuring rather than by reading the code:

• The correction is derived, never assumed. Our first attempt used the obvious value, half the window's width. The real one carries an extra offset, so that version would have moved the modal from badly wrong to slightly wrong, which is arguably worse. It now works the number out each time, which also means it stays correct if Shopify changes theirs.
• If neither repair reaches it, the app puts everything back rather than leaving a second wrong position stacked on the first.

This is in the shared shell behind every modal in the app, so it covers section and block previews, the theme picker, update confirmations and the billing screens, not just the one that was reported.

Nothing to do

The fix is in the app itself, so there is nothing to install or update. If you saw this, it should simply be gone.

Our own test for it runs 17 checks built on real measurements taken from a live store. Five of them fail if we go back to assuming the value instead of measuring it, which is the part that stops this quietly coming back.