From 5e2251dff8840783234a1eecf657cb7d006717e6 Mon Sep 17 00:00:00 2001
From: Linty <lintydev@gmail.com>
Date: Wed, 2 Jul 2025 15:42:29 +0200
Subject: [PATCH] fixes #2383 add custom ellipsis to show end of long album
 names

---
 admin/themes/default/css/components/album_selector.css | 5 +++++
 admin/themes/default/js/album_selector.js              | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/admin/themes/default/css/components/album_selector.css b/admin/themes/default/css/components/album_selector.css
index f99a1c019..ad23fd37d 100644
--- a/admin/themes/default/css/components/album_selector.css
+++ b/admin/themes/default/css/components/album_selector.css
@@ -164,6 +164,11 @@
   text-align: left;
 }
 
+.search-result-path.not-rtl {
+  direction: ltr !important;
+  text-overflow: unset !important;
+}
+
 .search-result-path-name {
   unicode-bidi: plaintext;
 }
diff --git a/admin/themes/default/js/album_selector.js b/admin/themes/default/js/album_selector.js
index d46363438..6fad3ec7e 100644
--- a/admin/themes/default/js/album_selector.js
+++ b/admin/themes/default/js/album_selector.js
@@ -551,7 +551,7 @@ class AlbumSelector {
 
       AlbumSelector.selectors.searchResult.append(
         `<div class='search-result-item' id="${cat.id}">
-        <span class="search-result-path">${cat_name}</span><span id="${cat.id}" class="${iconAlbum} item-add"></span>
+        <span class="search-result-path not-rtl">${this.#getEllipsisName(cat_name)}</span><span id="${cat.id}" class="${iconAlbum} item-add"></span>
       </div>`
       );
 
@@ -572,6 +572,10 @@ class AlbumSelector {
     !this.#isAlbumCreationChecked && this.#loadFillResultEvent(tempSelectedCat);
   }
 
+  #getEllipsisName(str, lenght = 50) {
+    if (str.length <= lenght) return str;
+    return '...' + str.slice(-lenght).trim();
+  } 
   /*-----------
   Ajax method
   -----------*/