<ui-modal /> always uses mobile styles due to IFrame window size

[Stef733]

Describe the bug

The new <ui-modal /> component always renders with the mobile breakpoints active due to calculating its window width as an IFrame.

To Reproduce

Steps to reproduce the behaviour:

1. Put a <TextField /> inside a <ui-modal /> on a desktop monitor

   <ui-modal id="my-modal">
   <p>Message</p>
   <TextField value="placeholder" />
   <ui-title-bar title="Title">
   <button variant="primary">Label</button>
   <button onclick="document.getElementById('my-modal').hide()">
     Label
   </button>
   </ui-title-bar>
   </ui-modal>

2. Open the modal

3. Observe the larger size of the text field

If applicable, add screenshots to help explain your problem.

Expected behaviour

The style sheets should obey the breakpoints inside the modal.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/shopify-app-remix @ 2.3.0
• @shopify/polaris @ 12.1.1

Platform

• OS: MacOS
• OS Version: Sonoma 14.2.1
• App: Chrome

[awd]

Noticing this as well @shopify/polaris @ ^12.9.0

[Stef733]

Adding screenshots for clarity - notice the font size difference. These are taken on the same screen size and page.

Old modal

New modal