From 4d8e626ff679ce2ad69055e91bf9138634287c42 Mon Sep 17 00:00:00 2001
From: "stuart.woodman" <stuart.woodman@csiro.au>
Date: Tue, 11 Jun 2024 15:45:16 +1000
Subject: [PATCH] If a single word in a custom layer is too long it will end
 with ellipses. Added layer name as tooltip to active layers title.

---
 src/app/menupanel/activelayers/activelayerspanel.component.html | 2 +-
 src/app/menupanel/activelayers/activelayerspanel.component.scss | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.html b/src/app/menupanel/activelayers/activelayerspanel.component.html
index 57726320..393f5a33 100644
--- a/src/app/menupanel/activelayers/activelayerspanel.component.html
+++ b/src/app/menupanel/activelayers/activelayerspanel.component.html
@@ -12,7 +12,7 @@
                     <i style="margin-left: 0;" class="ti-exchange-vertical" title="Drag to reorder"></i>
                 </div>
                 <!-- Title, loader spinner and delete button -->
-                <div class="activeLayerTitle">{{ layer.name }}</div>
+                <div class="activeLayerTitle" title="{{ layer.name }}">{{ layer.name }}</div>
                 <span style="margin-left: auto;" *ngIf="getUILayerModel(layer.id).statusMap.getRenderStarted()" class="project-percentage hasEvent light-blue">
                     <i *ngIf="!getUILayerModel(layer.id).statusMap.getRenderComplete()" class="fa fa-spin fa-spinner"></i>
                     <i *ngIf="getUILayerModel(layer.id).statusMap.getContainsError()" class="fa fa-warning text-warning"></i>
diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.scss b/src/app/menupanel/activelayers/activelayerspanel.component.scss
index 4d0c1254..4a0345b2 100644
--- a/src/app/menupanel/activelayers/activelayerspanel.component.scss
+++ b/src/app/menupanel/activelayers/activelayerspanel.component.scss
@@ -103,6 +103,8 @@
     .activeLayerTitle {
       font-size: 1.1rem;
       margin-right: 2px;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
   }