From 1f3511b45510b80c84e29ae20501d5f18c3ba2f0 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 21 Dec 2025 22:21:03 +0000
Subject: [PATCH] Refactor version history display and styling

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/control.html      | 12 ++++++------
 public/css/app.css       | 14 ++++++++++++++
 public/js/app_control.js | 34 +++++++++++++++++++++-------------
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/public/control.html b/public/control.html
index 2cc8060..31ab13b 100644
--- a/public/control.html
+++ b/public/control.html
@@ -65,11 +65,6 @@
         Réglages
       </button>
     </li>
-    <li class="nav-item" role="presentation">
-      <button class="nav-link" id="admin-version-tab" data-bs-toggle="tab" data-bs-target="#admin-version" type="button" role="tab" aria-controls="admin-version" aria-selected="false">
-        Version
-      </button>
-    </li>
     <li class="nav-item" role="presentation">
       <button class="nav-link" id="admin-movies-tab" data-bs-toggle="tab" data-bs-target="#admin-movies" type="button" role="tab" aria-controls="admin-movies" aria-selected="false">
         Films
@@ -95,6 +90,11 @@
         Backup / Restore
       </button>
     </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="admin-version-tab" data-bs-toggle="tab" data-bs-target="#admin-version" type="button" role="tab" aria-controls="admin-version" aria-selected="false">
+        Version
+      </button>
+    </li>
   </ul>
 
   <div class="tab-content pt-3">
@@ -204,7 +204,7 @@
 
             <div class="mt-3">
               <div class="text-muted small mb-2">Historique</div>
-              <div id="app_version_list" class="border rounded p-2 bg-light" style="white-space: pre-wrap;">—</div>
+              <div id="app_version_list" class="border rounded bg-white app-version-list">—</div>
             </div>
           </div>
         </div>
diff --git a/public/css/app.css b/public/css/app.css
index 544ca01..fb487db 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -126,4 +126,18 @@ footer {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
+  }
+
+  /* Admin → Version: keep history rows clean and readable */
+  .app-version-list .list-group-item {
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .app-version-list .list-group-item:first-child {
+    border-top: 0;
+  }
+
+  .app-version-list .list-group-item:last-child {
+    border-bottom: 0;
   }
\ No newline at end of file
diff --git a/public/js/app_control.js b/public/js/app_control.js
index 23fc6b0..0dd0cab 100644
--- a/public/js/app_control.js
+++ b/public/js/app_control.js
@@ -304,25 +304,33 @@ window.onload = async function () {
       return;
     }
 
-    appVersionListEl.innerHTML = versions.map((v) => {
+    const rows = versions.map((v) => {
       const id = String(v?.id || '');
       const isActive = activeId && id === activeId;
       const dateLabel = v?.dateISO ? formatDateTime(v.dateISO) : '—';
       const msg = escapeHtml(String(v?.message || '').trim());
-      return `
-        <div class="d-flex justify-content-between align-items-start border rounded px-2 py-2 mb-2 bg-white">
-          <div class="me-2">
-            <div class="fw-semibold">
-              ${escapeHtml(String(v?.version || '—'))}
-              ${isActive ? '<span class="badge bg-warning text-dark ms-1">Active</span>' : ''}
-            </div>
-            <div class="small text-muted">${escapeHtml(dateLabel)}${msg ? ` — ${msg}` : ''}</div>
-          </div>
-          <button type="button" class="btn btn-sm btn-outline-danger" data-app-version-delete="${escapeHtml(id)}">Supprimer</button>
-        </div>
-      `;
+      const versionLabel = escapeHtml(String(v?.version || '—'));
+      const activeBadge = isActive ? '<span class="badge bg-warning text-dark">Active</span>' : '';
+
+      // IMPORTANT: keep markup compact (no preserved whitespace surprises).
+      return (
+        `<div class="list-group-item d-flex justify-content-between align-items-start gap-3">` +
+          `<div class="min-width-0 flex-grow-1">` +
+            `<div class="d-flex align-items-center gap-2 flex-wrap">` +
+              `<span class="fw-semibold text-break">${versionLabel}</span>` +
+              `${activeBadge}` +
+            `</div>` +
+            `<div class="small text-muted text-break">${escapeHtml(dateLabel)}${msg ? ` — ${msg}` : ''}</div>` +
+          `</div>` +
+          `<div class="flex-shrink-0">` +
+            `<button type="button" class="btn btn-sm btn-outline-danger" data-app-version-delete="${escapeHtml(id)}">Supprimer</button>` +
+          `</div>` +
+        `</div>`
+      );
     }).join('');
 
+    appVersionListEl.innerHTML = `<div class="list-group list-group-flush">${rows}</div>`;
+
     appVersionListEl.querySelectorAll('button[data-app-version-delete]').forEach((btn) => {
       btn.addEventListener('click', async () => {
         const id = btn.getAttribute('data-app-version-delete');
-- 
2.54.0