From 1f293ae70bb804db20997e77d41a622690d28821 Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Sun, 17 May 2026 09:51:04 +0100
Subject: [PATCH] ui: compact pill layout for detail items; red availability
 warning

- Detail items (Size, Progress, Speed, ETA, Seeds, Peers, Availability,
  Completed) now render as inline pill badges with background + border-
  radius that wrap naturally on any screen width
- Remove mobile @media override that forced flex-direction:column,
  which was causing one-per-line centred layout on small screens
- Availability < 100%: value text shown in red (--danger) bold, both
  on card creation and on live SSE update via classList.toggle
- Also ensures updateDownloadCard keeps availability-warning in sync
---
 public/app.js    |  8 +++++---
 public/style.css | 20 ++++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/public/app.js b/public/app.js
index ef1498c..8c12ad8 100644
--- a/public/app.js
+++ b/public/app.js
@@ -359,9 +359,10 @@ function updateDownloadCard(card, download) {
       peersEl.textContent = download.peers;
     }
     
-    const availabilityEl = card.querySelector('.detail-item[data-label="Availability"] .detail-value');
-    if (availabilityEl && download.availability !== undefined) {
-      availabilityEl.textContent = `${download.availability}%`;
+    const availabilityItem = card.querySelector('.detail-item[data-label="Availability"]');
+    if (availabilityItem && download.availability !== undefined) {
+      availabilityItem.querySelector('.detail-value').textContent = `${download.availability}%`;
+      availabilityItem.classList.toggle('availability-warning', parseFloat(download.availability) < 100);
     }
   }
 }
@@ -558,6 +559,7 @@ function createDownloadCard(download) {
     
     if (download.availability !== undefined) {
       const availability = createDetailItem('Availability', `${download.availability}%`);
+      if (parseFloat(download.availability) < 100) availability.classList.add('availability-warning');
       details.appendChild(availability);
     }
   }
diff --git a/public/style.css b/public/style.css
index 8e8220b..ca25ed6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -462,17 +462,26 @@ body {
 .download-details {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px 14px;
+  gap: 4px 6px;
   padding-top: 6px;
   border-top: 1px solid var(--border);
   align-items: center;
 }
 
 .detail-item {
-  display: flex;
+  display: inline-flex;
   align-items: baseline;
-  gap: 4px;
+  gap: 3px;
   font-size: 0.78rem;
+  background: var(--bg-secondary, rgba(0,0,0,0.04));
+  border-radius: 4px;
+  padding: 2px 6px;
+  white-space: nowrap;
+}
+
+.detail-item.availability-warning .detail-value {
+  color: var(--danger, #e53e3e);
+  font-weight: 700;
 }
 
 .detail-label {
@@ -1021,11 +1030,6 @@ body {
     width: 40px;
   }
 
-  .download-details {
-    flex-direction: column;
-    gap: 2px;
-  }
-
   .progress-container {
     flex-wrap: wrap;
   }