Merge develop into main for v0.1.4

- download title: replace nowrap+ellipsis with break-word wrapping
- download header: flex-wrap so badges don't push off-screen
- path-item: word-break:break-all instead of nowrap overflow
- missing-text: allow wrapping instead of nowrap
- header-controls/user-info/admin-controls: full-width on mobile
- downloads-container: tighter padding on mobile
- status table: smaller padding + word-break on cache key codes
- timing row: narrower label/value columns on mobile
- import issue tooltip: constrained to viewport width, right-aligned
- ≤400px breakpoint: hide cover art, reduce app padding further

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sofarr",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A personal media download dashboard that shows your downloads 'so far' while you relax on the sofa waiting for your *arr services to finish",
   "main": "server/index.js",
   "scripts": {

public/style.css

@@ -378,8 +378,9 @@ body {
 
 .download-header {
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
   align-items: center;
+  gap: 4px;
   margin-bottom: 4px;
 }
 
@@ -438,9 +439,9 @@ body {
   margin-bottom: 2px;
   font-size: 0.9rem;
   font-weight: 600;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .download-series,
@@ -523,7 +524,8 @@ body {
   color: var(--danger);
   font-size: 0.72rem;
   font-weight: 500;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 /* ===== Footer ===== */
@@ -671,9 +673,9 @@ body {
   font-size: 0.7rem;
   font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
   color: var(--text-muted);
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  word-break: break-all;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .path-label {
@@ -729,6 +731,7 @@ body {
   background: var(--accent-light);
   color: var(--accent);
   margin-left: auto;
+  white-space: nowrap;
 }
 
 /* ===== Status Button ===== */
@@ -939,17 +942,39 @@ body {
 
 /* ===== Mobile ===== */
 @media (max-width: 768px) {
+  .app {
+    padding: 10px;
+  }
+
   .app-header {
     flex-direction: column;
     align-items: flex-start;
-    padding: 12px 14px;
+    padding: 10px 12px;
+    gap: 8px;
   }
 
   .header-controls {
+    width: 100%;
     flex-wrap: wrap;
     gap: 8px;
   }
 
+  .user-info {
+    width: 100%;
+    justify-content: space-between;
+    box-sizing: border-box;
+  }
+
+  .admin-controls {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .downloads-container {
+    padding: 12px;
+  }
+
   .download-card {
     padding: 8px 10px;
   }
@@ -970,4 +995,60 @@ body {
   .status-grid {
     grid-template-columns: 1fr;
   }
+
+  .status-table {
+    font-size: 0.72rem;
+  }
+
+  .status-table th,
+  .status-table td {
+    padding: 4px 4px;
+  }
+
+  .status-table td code {
+    word-break: break-all;
+  }
+
+  .timing-label {
+    width: 90px;
+  }
+
+  .timing-value {
+    width: 40px;
+  }
+
+  .import-issue-badge:hover::after {
+    left: auto;
+    right: 0;
+    max-width: calc(100vw - 24px);
+  }
+}
+
+/* ===== Very small screens (≤ 400px) ===== */
+@media (max-width: 400px) {
+  .app {
+    padding: 6px;
+  }
+
+  .download-cover {
+    display: none;
+  }
+
+  .theme-switcher {
+    flex-shrink: 0;
+  }
+
+  .user-info {
+    font-size: 0.78rem;
+    padding: 5px 10px;
+  }
+
+  .download-card {
+    padding: 8px;
+  }
+
+  .timing-label {
+    width: 75px;
+    font-size: 0.7rem;
+  }
 }