Dropzone not respecting height and inverted drop area when inside Modal

[joseclaudio-shopify]

Summary

We are experiencing strange behavior when using the Dropzone component within the modal in @shopify/app-bridge-react. Specifically:

• the Dropzone does not respect the modal height, but this issue is fixed after resizing the screen.
• the Dropzone area is actually inverted, becoming unable to drop files if hovered in the Dropzone area.

My app is the shop-importer-app, and the code was based on the web.

Expected behavior

When opening the modal, the Dropzone shows the correct layout similar to Admin -> Products -> Import 👇

When hovering a file, should not invert the Dropzone area 👇

Actual behavior

Dropzone does not respect the modal height

Screen.Recording.2024-06-03.at.12.40.25.1.mov

Dropzone area is actually inverted

Screen.Recording.2024-05-28.at.3.45.11.PM.mov

Steps to reproduce

Unfortunately the app has not released yet, you can reach out to pair or similar

Are you using React components?

Yes

Polaris version number

@shopify/polaris: ^13.4.0 => 13.4.0

Browser

Chrome: 125.0.6422.142

Device

macOS 14.5