Polaris React IndexTable + IndexFilters styling issue on mobile after route change (Embedded App)

Polaris
1

Hi everyone :waving_hand:

I’m working on a Shopify embedded app where I’m using both Polaris React and Polaris Web Components.

In one of my pages, I’m using IndexTable with IndexFilters (Polaris React). I’m facing a styling issue specifically on mobile devices.

Issue Details

  • When I directly reload the page that contains the IndexTable + IndexFilters, everything works correctly.

  • However, if I:

    1. Navigate to another route within the app

    2. Then navigate back to the IndexTable page

I encounter the following issues:

  • IndexFilters are not visible

  • First column sticky UI in IndexTable is not working

  • It seems like styles are not being applied properly

Additional Information

  • This is a Shopify embedded app (loaded inside Admin iframe).

  • I have imported Polaris React CSS globally at the root level of the app.

  • The issue appears mainly on mobile devices.

  • It feels like some styling or layout re-calculation is not happening after route change.

Has anyone experienced something similar with Polaris React + routing (React Router)?
Could this be related to style injection order, re-mounting issues, or mixing Polaris React with Polaris Web Components?

Any guidance would be greatly appreciated :folded_hands:

Thanks in advance!