I am working on migrating to the app bridge Max Modal to render full screen views. I’m facing a strange issue where the Tab component only renders the second button that is defined. This second button takes up 90% of the width and the rest 10% is covered by the default disclosureText with a dropdown icon that does not work when clicking on it. (Attaching screenshots of this). When I attempt to resize the window the tabs immediately fix itself and the correct buttons are displayed and the functionality is restored as well.
I have a very simple implementation:
import { Tabs } from "@shopify/polaris"
import { Modal, TitleBar } from '@shopify/app-bridge-react'
tabs = [
{
id: 'button',
content: "Button",
panelID: 'button',
},
{
id: 'form',
content: "form",
panelID: 'form',
},
]
tabPanels = [
(
<div>
<h1>Button</h1>
</div>
),
(
<div>
<h1>Form</h1>
</div>
)
]
const fullScreenModalMarkup = (
<Modal
open={true}
variant="max"
id="full-screen-modal"
>
<TitleBar title="Full screen modal">
</TitleBar>
<Tabs tabs={this.tabs} selected={selectedTabIndex} onSelect={this.handleSelectedTabIndexChange}>
{this.tabPanels[selectedTabIndex]}
</Tabs>
</Modal>
)
Any ideas on what could be the issue here?
TIA!
1st screenshot is the issue im seeing when the modal loads in.
2nd screenshot is the tabs fixing itself after I resize the window by a bit.