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

@@ -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>
             `;
         }