The action buttons of a Polaris modal (e.g. Cancel / Update) get hidden behind the floating navigation / Sidekick toolbar in the Shopify Mobile app, so they’re unreachable.
It’s not specific to our app - it also happens in Shopify’s own first-party apps. Screenshots:
- Our app — modal Cancel / Update buttons covered by the toolbar.
- Point of Sale — same toolbar overlapping the bottom area.
- Translate & Adapt — onboarding modal, the Next button is hidden.
Since it shows up in first-party apps too, this looks like a Polaris / Shopify Mobile shell issue rather than something individual apps can fix, and it will likely affect a lot of apps that use Polaris modals on mobile.
Jan
Hitting the same issue here, all Polaris modal actions (and part of the content) are covered by this new floating bar.
I’ve reported it to the department responsible for this, and they’re already working on it. We’ve noticed that it only happens on some e-shops, not all of them. As soon as I have more information, I’ll let you know.
There is a documentation for using --shopify-safe-area-inset-bottom which gives you the space when the app is loaded in Shopify Mobile Environment API .
We will bring this fix into Polaris out of the box but the app should be aware of that css to adjust properly.
Thanks Henry! Would that fix come to Polaris React too or just the web components? I suspect there may be a lot of apps still using Polaris React and won’t get that fix for free. Is there a decent way for us to monkey patch that in when we’re using the React version’s modals?
EDIT: Adding this to the top of our index.html fixes the modal issue on mobile:
<style>
.Polaris-Modal-Dialog__Modal {
bottom: var(--shopify-safe-area-inset-bottom, 0px) !important;
max-height: calc(
100% - var(--pc-modal-dialog-vertical-spacing, 0px) - var(--shopify-safe-area-inset-top, 0px) -
var(--shopify-safe-area-inset-bottom, 0px)
) !important;
}
@media (min-width: 48em) {
.Polaris-Modal-Dialog__Modal {
max-height: calc(100vh - var(--pc-modal-dialog-vertical-spacing, 0px)) !important;
}
}
</style>
I am adding similar code to App Bridge. So, it will be applied automatically without updating your app. I will update here after then fix is landed.
@marcbaumbach @Jan_Ther The fix is deployed to App Bridge CDN. No action needed from apps using Polaris Modal within the iframe. Apps still need to leverage the css variable for its own use case.
Hi, thanks! The modal issue is solved now and works great.
However, we’re still unsure how to handle components that are fixed to the bottom of the screen. For example, a floating chat button. From what I’ve seen, this affects all apps. Another example is the bottom slide-up panel in Translate & Adapt.
We can’t simply add extra bottom spacing because then the component would be positioned incorrectly when the floating toolbar isn’t present (for example, on mobile browsers).
Is there any way to detect whether the floating toolbar is currently displayed?
For example, Translate & Adapt becomes almost unusable because the toolbar covers part of the UI. It’s also interesting that the behavior differs between stores—in some stores the toolbar is shown, while in others it doesn’t appear at all.
I’ve attached a few screenshots for reference.
Floating Chat button
Mobile web browser
Mobile app without toolbar ( shop 1)
Mobile app with toolbar (shop 2)
Jan
