From 28144d83e4d9a1a806401b6981b86a1eb34d1cd5 Mon Sep 17 00:00:00 2001
From: awsr <43862868+awsr@users.noreply.github.com>
Date: Wed, 3 Dec 2025 21:16:38 -0800
Subject: [PATCH] Better rendering of long path names

---
 javascript/gallery.js | 45 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/javascript/gallery.js b/javascript/gallery.js
index e4c64c3af..d6572a13c 100644
--- a/javascript/gallery.js
+++ b/javascript/gallery.js
@@ -46,16 +46,46 @@ async function awaitForGallery(expectedSize, signal) {
 function updateGalleryStyles() {
   if (opts.theme_type?.toLowerCase() === 'modern') {
     folderStylesheet.replaceSync(`
-      .gallery-folder { cursor: pointer; padding: 8px 6px 8px 6px; background-color: var(--sd-button-normal-color); border-radius: var(--sd-border-radius); text-align: left; min-width: 12em;}
-      .gallery-folder:hover { background-color: var(--button-primary-background-fill-hover); }
-      .gallery-folder-selected { background-color: var(--sd-button-selected-color); color: var(--sd-button-selected-text-color); }
-      .gallery-folder-icon { font-size: 1.2em; color: var(--sd-button-icon-color); margin-right: 1em; filter: drop-shadow(1px 1px 2px black); float: left; }
+      .gallery-folder {
+        cursor: pointer;
+        padding: 8px 6px 8px 6px;
+        background-color: var(--sd-button-normal-color);
+        border-radius: var(--sd-border-radius);
+        text-align: left;
+        direction: rtl; /* Used to overflow the beginning instead of the end */
+        min-width: 12em;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .gallery-folder:hover {
+        background-color: var(--button-primary-background-fill-hover);
+      }
+      .gallery-folder-selected {
+        background-color: var(--sd-button-selected-color);
+        color: var(--sd-button-selected-text-color);
+      }
+      .gallery-folder-icon {
+        font-size: 1.2em;
+        color: var(--sd-button-icon-color);
+        margin-right: 1em;
+        filter: drop-shadow(1px 1px 2px black);
+        float: left;
+      }
     `);
   } else {
     folderStylesheet.replaceSync(`
-      .gallery-folder { cursor: pointer; padding: 8px 6px 8px 6px; }
-      .gallery-folder:hover { background-color: var(--button-primary-background-fill-hover); }
-      .gallery-folder-selected { background-color: var(--button-primary-background-fill); }
+      .gallery-folder {
+        cursor: pointer;
+        padding: 8px 6px 8px 6px;
+      }
+      .gallery-folder:hover {
+        background-color: var(--button-primary-background-fill-hover);
+      }
+      .gallery-folder-selected {
+        background-color: var(--button-primary-background-fill);
+      }
     `);
   }
   fileStylesheet.replaceSync(`
@@ -139,6 +169,7 @@ class GalleryFolder extends HTMLElement {
     const div = document.createElement('div');
     div.className = 'gallery-folder';
     div.innerHTML = `<span class="gallery-folder-icon">\uf03e</span> ${this.name}`;
+    div.title = this.name;
     div.addEventListener('click', () => {
       for (const folder of el.folders.children) {
         if (folder.name === this.name) folder.shadow.firstElementChild.classList.add('gallery-folder-selected');