From d98c802a400a0d28034912eecfe559166d672934 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 22 Dec 2025 22:28:46 +0000
Subject: [PATCH] Refactor movie category display to use details element

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/css/app.css         | 38 +++++++++++++++++++++++++++++++++-----
 public/js/app_user-stat.js | 25 +++++++++++++++++--------
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 9943aa4..e6eac00 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -264,11 +264,39 @@ footer {
     font-size: 0.875rem;
   }
 
-  .stats-movie-category {
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  .stats-movie-details {
+    margin-top: 6px;
+  }
+
+  .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 {
diff --git a/public/js/app_user-stat.js b/public/js/app_user-stat.js
index 6f67ba1..c9e7bf0 100644
--- a/public/js/app_user-stat.js
+++ b/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);