From df2612b626e12b3e194d8b0e5f53851b4da9ecf3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 9 Apr 2024 12:12:11 +0100
Subject: [PATCH] Improve nav item text overflow handling

---
 packages/client/src/components/app/NavItem.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/NavItem.svelte b/packages/client/src/components/app/NavItem.svelte
index f1d10650d5..360ea4f8bb 100644
--- a/packages/client/src/components/app/NavItem.svelte
+++ b/packages/client/src/components/app/NavItem.svelte
@@ -65,7 +65,7 @@
   {#key renderKey}
     <div class="dropdown" class:left={renderLeftNav} class:expanded>
       <div class="text" on:click={onClickDropdown}>
-        {text}
+        <span>{text}</span>
         <Icon name={icon} />
       </div>
       <div class="sublinks-wrapper">
@@ -95,13 +95,15 @@
 <style>
   /* Generic styles */
   a,
-  .text {
+  .text span {
     opacity: 0.75;
     color: var(--navTextColor);
     font-size: var(--spectrum-global-dimension-font-size-200);
     transition: opacity 130ms ease-out;
     font-weight: 600;
     user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   a.active {
     opacity: 1;