Refactor movie category display to use details element

Co-authored-by: mathieumoran1 <[email protected]>

public/css/app.css

@@ -264,11 +264,39 @@ footer {
     font-size: 0.875rem;
   }
 
-  .stats-movie-category {
+  .stats-movie-details {
-    max-width: 100%;
+    margin-top: 6px;
-    overflow: hidden;
+  }
-    white-space: nowrap;
+
-    text-overflow: ellipsis;
+  .stats-movie-details summary {
+    cursor: pointer;
+    user-select: none;
+    font-size: 0.85rem;
+    color: rgba(0, 0, 0, 0.6);
+    list-style: none;
+  }
+
+  .stats-movie-details summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .stats-movie-details summary::before {
+    content: "›";
+    display: inline-block;
+    margin-right: 6px;
+    transform: rotate(0deg);
+    transition: transform 120ms ease;
+  }
+
+  .stats-movie-details[open] summary::before {
+    transform: rotate(90deg);
+  }
+
+  .stats-movie-details-body {
+    margin-top: 6px;
+    padding-left: 14px;
+    line-height: 1.25rem;
+    overflow-wrap: anywhere;
   }
 
   .stats-movie-imdb {

public/js/app_user-stat.js

@@ -502,14 +502,6 @@ window.addEventListener('DOMContentLoaded', async function () {
           const meta = document.createElement('div');
           meta.className = 'stats-movie-meta';
 
-          if (category) {
-            const cat = document.createElement('div');
-            cat.className = 'stats-movie-category text-muted small';
-            cat.title = category;
-            cat.textContent = category;
-            meta.appendChild(cat);
-          }
-
           if (rating !== null && rating > 0) {
             const r = document.createElement('span');
             r.className = 'text-muted';
@@ -532,6 +524,23 @@ window.addEventListener('DOMContentLoaded', async function () {
           main.appendChild(topRow);
           if (meta.childNodes.length) main.appendChild(meta);
 
+          // Optional: keep long strings (like category) out of the main layout.
+          if (category) {
+            const details = document.createElement('details');
+            details.className = 'stats-movie-details';
+
+            const summary = document.createElement('summary');
+            summary.textContent = 'Détails';
+            details.appendChild(summary);
+
+            const body = document.createElement('div');
+            body.className = 'stats-movie-details-body text-muted small';
+            body.textContent = category;
+            details.appendChild(body);
+
+            main.appendChild(details);
+          }
+
           item.appendChild(poster);
           item.appendChild(main);
           movieGridEl.appendChild(item);