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, '&').replace(/"/g, '"');
+        }
+
         // ---- 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>
             `;
         }