Modal text is now big

[bakura10]

Hi,

On the new app bridge modals, only the input text used to be bigger and did not respect Polaris style guide. Still, a few days ago, all the content became huge (even plain elements), giving merchants a very inconsistent visual experience whenever interacting with modals.

It would be great for all the Polaris styles to also be applied on modals. The issue seems to be coming from the fact that because all font sizes are styled in REM, they are based on the font size. Unfortunately, on modal iframe, no font is set on the root so it uses the default browser.

Thanks.

[henrytao-me]

Hi @bakura10, if you use the new modal custom content, you can set classname for content element. All stylesheet in the main app iframe are copied to the modal iframe automatically.

[bakura10]

What do you mean? It definitely does not inherit the default style. You should not have to add a class name to have the proper styles setup. The font size is definitely incorrect for any elements inside a modal.

[bakura10]

This is how modals now look on App Bridge v4 modal:

This is how they should look:

The problem is coming from the fact that on embedded app it uses the font-size-325:

While on modal it uses a different font size for some reasons:

I wonder if it might be related to this (https://github.com/Shopify/shopify-app-template-remix/commit/d229368934741ec653a625ad8633e67c53062323) ? I'm running on the latest template.

[Stef733]

This is the same issue as #275

[bakura10]

It was just impacting input field but now it is impacting any text @Stef733 :D

[bakura10]

The issue is apparently fixed, so I am closing this.