CustomUI Modal Sizing in Service Portal

Hello everyone,

I am currently working on presenting our app as a major modal in the Service Portal. For this purpose I have written another react app in the /static directory, which only opens a modal with my app as resource. The new app runs under the “jiraServiceManagement:portalRequestCreatePropertyPanel” module. I have not found any other way to get into the context of a “Create Service Request”.

The problem is that the modal is much too small. Strangely, the modal in “xlarge” is larger than “max”.

Am I misunderstanding something in the styling? Why is my element so small, and how can I make it bigger? The size of the custom UI modal behaved quite differently in the context of the “jira:projectPage” module.

I also set the “viewportSize” of the “jiraServiceManagement:portalRequestCreatePropertyPanel” module to “xlarge”. But this change had no effect on the Modal sizing.

Here is my code for opening the Modal:

import { useEffect, useState } from 'react';
import { Modal, view, router } from '@forge/bridge';

function App() {
  const [context, setContext] = useState(null);

  useEffect(() => {
    view.getContext().then(setContext);
  }, []);

  useEffect(() => {
    if (context) {
      const modal = new Modal({
        resource: 'catalog',
        size: 'max',
        onClose: () =>
          router.navigate(
            context.siteUrl +
              '/servicedesk/customer/portal/' +
              context.extension.portal.id
          ),
      });
      modal.open();
    }
  }, [context]);

  return <p></p>;
}

export default App;

Here is the rendered Modal…


As you can see, it’s way too small.

I would really appreciate any ideas or tips on how to get the Modal bigger.
Thanks in advance,
Regards
Adrian