From d5b7ec50d2c39ee1ba3b781efdd8c31ea866d461 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Fri, 16 Feb 2024 11:57:22 -0700
Subject: [PATCH] Et2Tree: Stop tree item labels from wrapping, they now show
 ellipsis instead

---
 api/js/etemplate/Et2Tree/Et2Tree.ts | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/api/js/etemplate/Et2Tree/Et2Tree.ts b/api/js/etemplate/Et2Tree/Et2Tree.ts
index d9fee364ed..9f9a9f9628 100644
--- a/api/js/etemplate/Et2Tree/Et2Tree.ts
+++ b/api/js/etemplate/Et2Tree/Et2Tree.ts
@@ -141,11 +141,26 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
                 ::part(expand-button) {
                     padding: 0;
                 }
-			`,
-			css`
-                ::part(label):hover {
+
+				/* Stop icon from shrinking if there's not enough space */
+
+				sl-tree-item sl-icon {
+					flex: 0 0 1em;
+				}
+
+				::part(label) {
+					overflow: hidden;
+				}
+
+				::part(label):hover {
                     text-decoration: underline;
                 }
+
+				.tree-item__label {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
 			`
 		]
 	}
@@ -622,7 +637,7 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
 		return html`
             <sl-tree-item
                     part="item"
-                    exportparts="checkbox"
+                    exportparts="checkbox, label"
                     id=${selectOption.id}
                     title=${selectOption.tooltip || nothing}
                     ?selected=${typeof this.value == "string" && this.value == selectOption.id || typeof this.value?.includes == "function" && this.value.includes(selectOption.id)}
@@ -644,7 +659,7 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
             >
                 <sl-icon src="${img ?? nothing}"></sl-icon>
 
-                ${selectOption.text}
+                <span class="tree-item__label">${selectOption.text}</span>
                 ${selectOption.item ? repeat(selectOption.item, this._optionTemplate) : nothing}
             </sl-tree-item>`
 	}