From e248ac49908cc0563dafaafa01544f53f99cb43d Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Thu, 6 Jun 2024 07:33:14 +0300
Subject: [PATCH] Fixed checking the width of the label in the navigator
 (#5739)

---
 packages/ui/src/components/NavItem.svelte | 16 +++++++++++-----
 packages/ui/src/resize.ts                 |  2 +-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/NavItem.svelte b/packages/ui/src/components/NavItem.svelte
index c22ce2e7de..96290098e5 100644
--- a/packages/ui/src/components/NavItem.svelte
+++ b/packages/ui/src/components/NavItem.svelte
@@ -56,6 +56,7 @@
   export let level: number = 0
   export let _id: any = undefined
 
+  let labelEl: HTMLSpanElement
   let labelWidth: number
   let levelReset: boolean = false
   let hovered: boolean = false
@@ -65,6 +66,14 @@
   $: isOpen = !getTreeCollapsed(_id, collapsedPrefix)
   $: setTreeCollapsed(_id, !isOpen, collapsedPrefix)
   $: visibleIcon = folderIcon ? (isOpen && !empty ? IconFolderExpanded : IconFolderCollapsed) : icon
+
+  const mouseOver = () => {
+    if (!hovered) {
+      labelWidth = labelEl.getBoundingClientRect().width
+      hovered = true
+    }
+    if (!levelReset && labelWidth < 16 && level > 0) levelReset = true
+  }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -78,10 +87,7 @@
   class:disabled
   class:showMenu
   class:noActions={$$slots.actions === undefined}
-  on:mouseover={() => {
-    if (!levelReset && labelWidth < 16 && level > 0) levelReset = true
-    if (!hovered) hovered = true
-  }}
+  on:mouseover={mouseOver}
   on:mouseleave={() => {
     if (levelReset && !showMenu) levelReset = false
     hovered = false
@@ -115,7 +121,7 @@
     </div>
   {/if}
   <span
-    bind:clientWidth={labelWidth}
+    bind:this={labelEl}
     use:tooltip={shouldTooltip ? { label: label ?? getEmbeddedLabel(title ?? ''), direction: 'top' } : undefined}
     class="{description ? 'hulyNavItem-wideLabel' : 'hulyNavItem-label'} overflow-label"
     class:flex-grow={!(type === 'type-anchor-link')}
diff --git a/packages/ui/src/resize.ts b/packages/ui/src/resize.ts
index 5b8f80fad1..8701f8f51f 100644
--- a/packages/ui/src/resize.ts
+++ b/packages/ui/src/resize.ts
@@ -153,7 +153,7 @@ export const panelSeparators: DefSeparators = [
 ]
 
 export const workbenchSeparators: DefSeparators = [
-  { minSize: 12.5, size: 17.5, maxSize: 22.5, float: 'navigator' },
+  { minSize: 12.5, size: 17.5, maxSize: 40, float: 'navigator' },
   null,
   { minSize: 20, size: 30, maxSize: 50, float: 'aside' }
 ]