From 219c09692f7f56b12dbaee367c57224d38952d3a Mon Sep 17 00:00:00 2001
From: rmsitz <rmsitz@gmail.com>
Date: Sun, 23 Aug 2026 15:11:06 -0400
Subject: [PATCH] Show full course name on hover in grid view

Grid card names are clamped to 2 lines and clipped, so a long
dot-separated course name (the common case for this library) had no
way to be read in full without switching to list view. Add a title
attribute so hovering reveals the complete name.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 templates/course_dashboard.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/templates/course_dashboard.html b/templates/course_dashboard.html
index b55e274..c3ceaa8 100644
--- a/templates/course_dashboard.html
+++ b/templates/course_dashboard.html
@@ -1423,6 +1423,13 @@
             return span;
         }
 
+        // For embedding a name in an HTML attribute (e.g. title="...") -
+        // grid-card names are clamped to 2 lines and clipped, so the title
+        // attribute is what lets a hover reveal the full name.
+        function escapeAttr(text) {
+            return text.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+        }
+
         // ---- Library list/grid view toggle (client-only, remembered per device) ----
         let libraryViewMode = localStorage.getItem('offlineu-library-view-mode') || 'list';
 
@@ -1527,7 +1534,7 @@
                 <div class="library-grid-card" onclick="${clickHandler}">
                     ${selectableAttrs(item)}
                     <div class="grid-card-thumb-wrap">${iconHtml}</div>
-                    <div class="grid-card-name">${item.name}</div>
+                    <div class="grid-card-name" title="${escapeAttr(item.name)}">${item.name}</div>
                     <div class="grid-card-meta">${item.media_files} media file${item.media_files === 1 ? '' : 's'}</div>
                 </div>
             `;
@@ -1541,7 +1548,7 @@
                 <div class="library-grid-card" onclick="${clickHandler}">
                     ${selectableAttrs(item)}
                     <div class="grid-card-thumb-wrap">📁</div>
-                    <div class="grid-card-name">${item.name}</div>
+                    <div class="grid-card-name" title="${escapeAttr(item.name)}">${item.name}</div>
                 </div>
             `;
         }