App Bridge React Modal - height is wrong

[Shaibt]

Hi,

Am using @shopify/app-bridge-react (1.24.0)to embed our app’s admin.

When user first lands on our app’s admin page they are presented with an onboarding screen that has a sign-in/sign-up button.

This button initiates a Modal (app-bridge-react Modal and not polaris-react Modal) so:

<Modal
       title={ "Admin Sign up" }
       open={modalOpen}
       src={modalUrl}
       onClose={onModalClose} 
        secondaryActions={[{ content: 'Close', onAction: onModalClose}]}
    />

The modalUrl is a relative path inside my app - ‘/login’ or ‘/signup’

When the modal is presented, it is presented with a default height that DOESN’T MATCH the actual contents of my login page and creates a vertical scroll - see attached.

This is my main components routing scheme:

return (
    <Provider config={shopifyConfig}>
      <AppBridgeRouter />
      <AppBridgeRoutePropagator />
      {authLoading && <Loading />}

      <Switch>
        <Route path='/login'>
          <LoginPage />
        </Route>
        <Route path='/signup'>
          <SignUpPage />
        </Route>
        <Route path='/onboard'> 
          <OnboardPage /> 
        </Route>
...

I’m sure App Bridge Provider is initialized properly (or modal wouldn’t show at all)

AppBridgeRouter = app bridge react ClientRouter

AppBridgeRoutePropagator = app bridge react RoutePropagator

Both the login and signup pages render a polaris-react Card as their root element:

return (
        <Card sectioned>
            <Stack vertical>
                <TextContainer>
...

BTW, using the polaris-react Modal instead works as expected - no vertical scroll on modal window. Shopify guidelines are to use an app-bridge modal in this use-case and not non-embedded Polaris modal (makes sense to prevent user interaction with Shopify admin)

[hannachen]

Hi @Shaibt ?

In your screenshot, it looks like the default small modal is being displayed. In App Bridge, you can specify the size of the modal. Could you add a size option to see if that works for you? https://shopify.dev/tools/app-bridge/actions/modal#set-modal-size

[Shaibt]

Hi @hannachen ,

That wasn’t clear to me as in Polaris, the modal simply resized it self based on my content.

I went ahead and specifically set the size to ‘Medium’.

This helped slightly as now my Login modal (only username and password) fits in nicely but by Signup modal, which is larger and has more form fields, still didn’t fit.

So I tried setting the modal size to ‘Large’ and nothing happened - the modal size remained same as with “Medium”.

The new screenshots attached below are for when modal size=‘Large’ (again, same size as ‘Medium’)

EDIT: I’ve attached a 3rd screenshot (first below) of how the Polaris Modal behaves in same scenario. You can see it extends almost to the edge of the screen so all content fits.

[hannachen]

Thanks for sharing your results! Ah yes, the modals in App Bridge behave slightly different from Polaris because it also controls native mobile UI elements, and some concepts such as height, don’t translate well. If you’re looking for auto resizing modal similar to Polaris, perhaps you could give the auto-sizing modals a try? There’s a bit of additional setup, but the utility should make that a bit less manual: https://shopify.dev/tools/app-bridge/actions/modal#set-modal-size-automatically

[Shaibt]

So if we want the modal to display nicely embedded on mobile, rather than forcing the height of the modal to fit our content we should design the modal content to fit the standard App Bridge “Large” modal height ? Looking to do what’s best for merchant UX.

[Halkenguard]

It appears that the accepted solution here is deprecated according to Shopify documentation%3B%0A%7D-,Deprecation%20rationale,-As%20of%20v3.17.0) for embedded apps. Have there been any options added to App Bridge React to control the height of a modal? As it seems the current modal implementation does not respond to the limitHeight or noScroll properties.