Hey,
I’m facing an issue with the Polaris React Tabs component`.
I’m currently using Polaris Web Components, but since there is no Tabs component available in Web Components, I am forced to use the Polaris React Tabs component inside my project. Because of this mix, I’m not sure if the issue is related to compatibility or a rendering bug.
On initial page load, the first tab is stretched to full width, as shown in the screenshot below.
However, when I switch tabs using the More views dropdown, the tab width immediately corrects itself and displays normally.
Issue Details:
-
Using Polaris Web Components + Polaris React Tabs
-
Component:
@shopify/polaris–Tabs -
Issue: First tab renders at full width on page load
-
Expected: Tabs should render with proper sizing initially
-
Actual: Width fixes only after switching tabs from the “More views” dropdown
-
Screenshot:
Additional Notes:
-
No custom CSS affecting tab layout.
-
Issue occurs only on initial render.
-
Possibly related to layout calculation not running until tab change.
Could someone from Shopify or the community clarify whether this is a known issue or if there’s a workaround when combining Polaris Web Components with Polaris React components?
Thank you!