diff --git a/package.json b/package.json index 6de8f92..ff08aa8 100644 --- a/package.json +++ b/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": { diff --git a/public/style.css b/public/style.css index b1d0188..178fd11 100644 --- a/public/style.css +++ b/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; + } }