From 08621c4bc143ac01bd72fd282d43a5ae3cac94a0 Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Wed, 12 Apr 2023 16:11:21 +0600
Subject: [PATCH] Fix popup fit (#2959)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 packages/ui/src/components/Popup.svelte                  | 9 +++++++++
 packages/ui/src/components/PopupInstance.svelte          | 4 ++++
 .../workbench-resources/src/components/Workbench.svelte  | 4 +++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Popup.svelte b/packages/ui/src/components/Popup.svelte
index 7e7aa42952..3a7454d711 100644
--- a/packages/ui/src/components/Popup.svelte
+++ b/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}
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index b40b5e4aa9..7f44d1b472 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/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>
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index f42cae13ae..85aaed6559 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/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>