fix: make folder status visible with dot + text label

Status dot was 8x8px with no text, nearly invisible in the table.
Now renders as a colored dot with an adjacent text label
(Available / Unavailable).

media_server/static/css/styles.css

@@ -192,19 +192,31 @@ h1 {
 }
 
 .status-dot {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    transition: color 0.3s;
+}
+
+.status-dot::before {
+    content: '';
+    display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--error);
+    flex-shrink: 0;
     transition: background 0.3s;
 }
 
-.status-dot.connected,
-.status-dot.status-online {
+.status-dot.connected::before,
+.status-dot.status-online::before {
     background: var(--accent);
 }
 
-.status-dot.status-offline {
+.status-dot.status-offline::before {
     background: var(--error);
 }
 

media_server/static/js/browser.js

@@ -906,8 +906,8 @@ export function loadFoldersTable() {
     tbody.innerHTML = entries.map(([id, folder]) => {
         const available = folder.available !== false;
         const statusIcon = available
-            ? '<span class="status-dot status-online" title="' + t('browser.folder_available') + '"></span>'
-            : '<span class="status-dot status-offline" title="' + t('browser.folder_unavailable') + '"></span>';
+            ? '<span class="status-dot status-online">' + t('browser.folder_available') + '</span>'
+            : '<span class="status-dot status-offline">' + t('browser.folder_unavailable') + '</span>';
         const enabledBadge = folder.enabled
             ? ''
             : ' <span class="folder-disabled-badge">' + t('browser.folder_disabled') + '</span>';