From d7a8b5f2b776dd7cd6bd75c535fa3e4fd310d46d Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 26 Sep 2023 10:58:56 +0100
Subject: [PATCH] Updated the nav item body text to ensure it was truncated.
 The selected by Avatar was being pushed out of view. Hover text added

---
 packages/builder/src/components/common/NavItem.svelte | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index a65da55c8f..2c8a862535 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -102,7 +102,7 @@
       </div>
     {/if}
     <div class="text" title={showTooltip ? text : null}>
-      {text}
+      <span title={text}>{text}</span>
       {#if selectedBy}
         <UserAvatars size="XS" users={selectedBy} />
       {/if}
@@ -227,9 +227,6 @@
   .text {
     font-weight: 600;
     font-size: 12px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     flex: 1 1 auto;
     color: var(--spectrum-global-color-gray-900);
     order: 2;
@@ -238,6 +235,11 @@
     align-items: center;
     gap: 8px;
   }
+  .text span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .scrollable .text {
     flex: 0 0 auto;
     max-width: 160px;