Modal inside Jira gadget missing styles when opened via window.parent.AJS

Jira Development Jira Server
, ,
1

Hi everyone,

I’m working on a Jira plugin that runs both on a dedicated page and as a gadget. One of the core features requires opening a custom modal.
We use React for the plugin frontend.
The modal works fine on the standalone app page, but inside the gadget it becomes very inconvenient — it’s rendered in the small gadget iframe. To address this, I’m trying to render the modal in the body of the whole page rather than inside the gadget iframe.
To open the modal i have created such function:

export default async function openModal(params) {
 // when opening the modal in the main app AJS is on the same level as our     app. But when we opening the modal from the gadget it is attached to the parent object.
  const host = window.AJS ? window : window.parent;
  const { AJS } = host;
  const dlg = new AJS.Dialog(params);
  dlg.addPanel(
    'Panel 1',
    '<div id="modal-container" />',
    'panel-body',
  );
  dlg.show();
  ReactDOM.render(
    <ModalComponent />,
    window.parent.document.getElementById('modal-container'),
  );
}

This approach opens the modal in both cases, but when it’s opened from the gadget, it does not load any CSS styles. Even Atlaskit components are missing their styles.

Question:
Is there a way to open the modal from a gadget with proper styles applied (same as when opened from the app)? Has anyone dealt with a similar issue before? Maybe there are better ways for achieving this result?

Thanks in advance!