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>

public/css/app.css

@@ -127,3 +127,17 @@ footer {
     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;
+  }

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 `
+      const versionLabel = escapeHtml(String(v?.version || '—'));
-        <div class="d-flex justify-content-between align-items-start border rounded px-2 py-2 mb-2 bg-white">
+      const activeBadge = isActive ? '<span class="badge bg-warning text-dark">Active</span>' : '';
-          <div class="me-2">
+
-            <div class="fw-semibold">
+      // IMPORTANT: keep markup compact (no preserved whitespace surprises).
-              ${escapeHtml(String(v?.version || '—'))}
+      return (
-              ${isActive ? '<span class="badge bg-warning text-dark ms-1">Active</span>' : ''}
+        `<div class="list-group-item d-flex justify-content-between align-items-start gap-3">` +
-            </div>
+          `<div class="min-width-0 flex-grow-1">` +
-            <div class="small text-muted">${escapeHtml(dateLabel)}${msg ? ` — ${msg}` : ''}</div>
+            `<div class="d-flex align-items-center gap-2 flex-wrap">` +
-          </div>
+              `<span class="fw-semibold text-break">${versionLabel}</span>` +
-          <button type="button" class="btn btn-sm btn-outline-danger" data-app-version-delete="${escapeHtml(id)}">Supprimer</button>
+              `${activeBadge}` +
-        </div>
+            `</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');