From 3f700f898232e8bcd1a150229a9dde65f74aaf92 Mon Sep 17 00:00:00 2001 From: satoshi Date: Tue, 19 May 2026 03:40:59 +0300 Subject: [PATCH] Make entire UI mobile-friendly with responsive breakpoints Add media queries at 480px/768px across all components: single-column dashboard cards on phones, progressive table column hiding, smaller typography, reduced padding, full-width toggle buttons, and compact header. Desktop layout unchanged. --- ui/src/App.svelte | 6 ++++++ ui/src/app.css | 28 ++++++++++++++++++++++++++++ ui/src/lib/BestSharePage.svelte | 22 ++++++++++++++++++++++ ui/src/lib/BestShares.svelte | 14 ++++++++++++++ ui/src/lib/BlocksTable.svelte | 18 ++++++++++++++++++ ui/src/lib/Header.svelte | 13 +++++++++++++ ui/src/lib/MinersTable.svelte | 24 ++++++++++++++++++++++++ ui/src/lib/PoolOverview.svelte | 6 ++++++ ui/src/lib/SharesBar.svelte | 14 ++++++++++++++ ui/src/lib/StatsPage.svelte | 3 +++ ui/src/lib/UserDetailPage.svelte | 23 +++++++++++++++++++++++ ui/src/lib/WorkerDetailPage.svelte | 9 +++++++++ 12 files changed, 180 insertions(+) diff --git a/ui/src/App.svelte b/ui/src/App.svelte index 1191234..190d598 100644 --- a/ui/src/App.svelte +++ b/ui/src/App.svelte @@ -93,6 +93,12 @@ flex-direction: column; gap: 1.25rem; } + @media (max-width: 480px) { + main { + padding: 1rem 0.6rem 3rem; + gap: 1rem; + } + } main::before { content: ''; position: fixed; diff --git a/ui/src/app.css b/ui/src/app.css index 7486e9f..28de2ab 100644 --- a/ui/src/app.css +++ b/ui/src/app.css @@ -98,6 +98,34 @@ code, grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } +/* ── Mobile breakpoints ── */ +@media (max-width: 480px) { + :root { + font-size: 13px; + } + .card { + padding: 1rem 1rem; + } + .grid-4 { + grid-template-columns: 1fr 1fr; + } + .grid-2 { + grid-template-columns: 1fr; + } + .stat-value { + font-size: 1.4rem; + } + th, td { + padding: 0.4rem 0.5rem; + font-size: 0.9em; + } +} +@media (max-width: 360px) { + .grid-4 { + grid-template-columns: 1fr; + } +} + .stat-label { color: var(--fg-dim); font-size: 0.82em; diff --git a/ui/src/lib/BestSharePage.svelte b/ui/src/lib/BestSharePage.svelte index 7d04931..a2bb40e 100644 --- a/ui/src/lib/BestSharePage.svelte +++ b/ui/src/lib/BestSharePage.svelte @@ -572,4 +572,26 @@ .swatch.have { background: var(--good); } .swatch.need { background: rgb(245, 196, 71); } .swatch.rest { background: var(--fg); } + + @media (max-width: 480px) { + .toggle-bar { + width: 100%; + } + .toggle-btn { + flex: 1; + text-align: center; + font-size: 0.78rem; + padding: 0.5em 0.5em; + } + .hash-vis { + font-size: 0.75rem; + letter-spacing: 0.01em; + } + .hash-vis.binary { + font-size: 0.6rem; + } + .totals { + grid-template-columns: 1fr; + } + } diff --git a/ui/src/lib/BestShares.svelte b/ui/src/lib/BestShares.svelte index 549d4bd..81419d9 100644 --- a/ui/src/lib/BestShares.svelte +++ b/ui/src/lib/BestShares.svelte @@ -69,4 +69,18 @@ color: var(--fg-dim); padding: 0.5rem 0; } + + /* Mobile: hide session best column, truncate worker names */ + @media (max-width: 480px) { + table :global(th:nth-child(3)), + table :global(td:nth-child(3)) { + display: none; + } + td.mono { + max-width: 140px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } diff --git a/ui/src/lib/BlocksTable.svelte b/ui/src/lib/BlocksTable.svelte index 5e794b6..64b22a9 100644 --- a/ui/src/lib/BlocksTable.svelte +++ b/ui/src/lib/BlocksTable.svelte @@ -194,4 +194,22 @@ font-weight: 400; margin-left: 0.25em; } + + /* Mobile: hide Chain, Hash, Reward columns */ + @media (max-width: 768px) { + table :global(th:nth-child(3)), + table :global(td:nth-child(3)), + table :global(th:nth-child(4)), + table :global(td:nth-child(4)) { + display: none; + } + } + @media (max-width: 480px) { + table :global(th:nth-child(5)), + table :global(td:nth-child(5)), + table :global(th:nth-child(6)), + table :global(td:nth-child(6)) { + display: none; + } + } diff --git a/ui/src/lib/Header.svelte b/ui/src/lib/Header.svelte index 2ab186f..67d5a52 100644 --- a/ui/src/lib/Header.svelte +++ b/ui/src/lib/Header.svelte @@ -119,4 +119,17 @@ .ws-label { text-transform: lowercase; } + + @media (max-width: 480px) { + .brand { + font-size: 1.05rem; + gap: 0.4rem; + } + .name { + display: none; + } + .meta { + font-size: 0.8rem; + } + } diff --git a/ui/src/lib/MinersTable.svelte b/ui/src/lib/MinersTable.svelte index e1a9c70..5773767 100644 --- a/ui/src/lib/MinersTable.svelte +++ b/ui/src/lib/MinersTable.svelte @@ -278,4 +278,28 @@ tr.idle td { color: var(--fg-dim); } + + /* Mobile: hide less critical columns */ + @media (max-width: 768px) { + table :global(th:nth-child(2)), + table :global(td:nth-child(2)), + table :global(th:nth-child(5)), + table :global(td:nth-child(5)), + table :global(th:nth-child(6)), + table :global(td:nth-child(6)) { + display: none; + } + } + @media (max-width: 480px) { + table :global(th:nth-child(4)), + table :global(td:nth-child(4)), + table :global(th:nth-child(7)), + table :global(td:nth-child(7)) { + display: none; + } + .section-head { + flex-direction: column; + gap: 0.25em; + } + } diff --git a/ui/src/lib/PoolOverview.svelte b/ui/src/lib/PoolOverview.svelte index 0e0f297..d463c1e 100644 --- a/ui/src/lib/PoolOverview.svelte +++ b/ui/src/lib/PoolOverview.svelte @@ -272,6 +272,12 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } } + @media (max-width: 480px) { + .grid-5 { + grid-template-columns: 1fr; + gap: 0.75rem; + } + } .retarget-bar { height: 4px; diff --git a/ui/src/lib/SharesBar.svelte b/ui/src/lib/SharesBar.svelte index f36c9a9..fc42e85 100644 --- a/ui/src/lib/SharesBar.svelte +++ b/ui/src/lib/SharesBar.svelte @@ -285,4 +285,18 @@ height: 1px; } } + @media (max-width: 480px) { + .shares-bar { + padding: 0.8rem 1rem; + } + .accepted, .rejected { + font-size: 1.15rem; + } + .pct { + font-size: 0.88rem; + } + .group { + flex-wrap: wrap; + } + } diff --git a/ui/src/lib/StatsPage.svelte b/ui/src/lib/StatsPage.svelte index c22d5a0..979ea1a 100644 --- a/ui/src/lib/StatsPage.svelte +++ b/ui/src/lib/StatsPage.svelte @@ -269,6 +269,9 @@ .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { + .totals { grid-template-columns: 1fr 1fr; } + } + @media (max-width: 360px) { .totals { grid-template-columns: 1fr; } } diff --git a/ui/src/lib/UserDetailPage.svelte b/ui/src/lib/UserDetailPage.svelte index 7c5ab94..a35c76a 100644 --- a/ui/src/lib/UserDetailPage.svelte +++ b/ui/src/lib/UserDetailPage.svelte @@ -435,4 +435,27 @@ tr.idle td { color: var(--fg-dim); } + + /* Mobile: hide Hardware, Status, Diff, Best(session) columns */ + @media (max-width: 768px) { + table :global(th:nth-child(2)), + table :global(td:nth-child(2)), + table :global(th:nth-child(3)), + table :global(td:nth-child(3)), + table :global(th:nth-child(6)), + table :global(td:nth-child(6)) { + display: none; + } + } + @media (max-width: 480px) { + table :global(th:nth-child(5)), + table :global(td:nth-child(5)), + table :global(th:nth-child(7)), + table :global(td:nth-child(7)) { + display: none; + } + .addr { + font-size: 1rem; + } + } diff --git a/ui/src/lib/WorkerDetailPage.svelte b/ui/src/lib/WorkerDetailPage.svelte index 38d6c87..3d78507 100644 --- a/ui/src/lib/WorkerDetailPage.svelte +++ b/ui/src/lib/WorkerDetailPage.svelte @@ -351,4 +351,13 @@ font-size: 0.85rem; word-break: break-all; } + + @media (max-width: 480px) { + .wname { + font-size: 1rem; + } + .detail-grid { + grid-template-columns: 1fr 1fr; + } + }