Fix popup fit (#2959)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

packages/ui/src/components/Popup.svelte

@@ -17,6 +17,14 @@
   import PopupInstance from './PopupInstance.svelte'
 
   export let contentPanel: HTMLElement
+
+  const instances: PopupInstance[] = []
+
+  export function fitPopupInstance (): void {
+    instances.forEach((p) => p.fitPopupInstance())
+  }
+
+  $: instances.length = $modal.length
 </script>
 
 {#if $modal.length > 0}
@@ -25,6 +33,7 @@
 {#each $modal as popup, i}
   {#key popup.id}
     <PopupInstance
+      bind:this={instances[i]}
       is={popup.is}
       props={popup.props}
       element={popup.element}

packages/ui/src/components/PopupInstance.svelte

@@ -115,6 +115,10 @@
     )
   }
 
+  export function fitPopupInstance (): void {
+    if (modalHTML) fitPopup(modalHTML, element, contentPanel)
+  }
+
   $: if ($deviceInfo.docWidth <= 900 && !docSize) docSize = true
   $: if ($deviceInfo.docWidth > 900 && docSize) docSize = false
 </script>

plugins/workbench-resources/src/components/Workbench.svelte

@@ -96,6 +96,7 @@
     .then((res) => (apps = res))
 
   let panelInstance: PanelInstance
+  let popupInstance: Popup
 
   let visibileNav: boolean = true
   async function toggleNav (): Promise<void> {
@@ -104,6 +105,7 @@
     if (currentApplication && navigatorModel && navigator) {
       await tick()
       panelInstance.fitPopupInstance()
+      popupInstance.fitPopupInstance()
     }
   }
 
@@ -695,7 +697,7 @@
       <ActionContext context={{ mode: 'panel' }} />
     </svelte:fragment>
   </PanelInstance>
-  <Popup {contentPanel}>
+  <Popup bind:this={popupInstance} {contentPanel}>
     <svelte:fragment slot="popup-header">
       <ActionContext context={{ mode: 'popup' }} />
     </svelte:fragment>