From 5bf939310f76231f1388015f39de026ba8c48fae Mon Sep 17 00:00:00 2001
From: Proof of Prints <proofofprints@users.noreply.github.com>
Date: Sun, 7 Jun 2026 00:13:22 -0500
Subject: [PATCH] fix(dashboard): responsive stat grids so values don't
 truncate

Fixed grid-cols-4/-5 grids didn't reflow at narrow widths, truncating
values (e.g. '0.030' vs '0.0307'). Add breakpoints:
- Miners + Mining-by-Coin grids: grid-cols-2 sm:grid-cols-4
- Hashbreakdown/uptime row: grid-cols-2 sm:grid-cols-3 lg:grid-cols-5
---
 src/pages/Dashboard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 73c374c..27e2d2e 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -527,7 +527,7 @@ export default function Dashboard() {
       ) : (
         <>
       {/* Summary stats — Miners breakdown */}
-      <div className="grid grid-cols-4 gap-4 mb-4">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-4">
         <StatCard
           label="Total Miners"
           value={totalCount}
@@ -551,7 +551,7 @@ export default function Dashboard() {
       </div>
 
       {/* Hashrate breakdown + uptime */}
-      <div className="grid grid-cols-5 gap-4 mb-6">
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-6">
         <StatCard
           label="Total Hashrate"
           value={totalHashrateGhs.toFixed(1)}
@@ -850,7 +850,7 @@ export default function Dashboard() {
                           )}
                         </div>
                       </div>
-                      <div className="grid grid-cols-4 gap-3">
+                      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                         <div className="bg-dark-900 rounded-lg p-3">
                           <p className="text-xs text-slate-400 mb-1">Total Miners</p>
                           <p className="text-xl font-bold text-white">{count}</p>
@@ -870,7 +870,7 @@ export default function Dashboard() {
                           </p>
                         </div>
                       </div>
-                      <div className="grid grid-cols-4 gap-3 mt-3">
+                      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-3">
                         <div className="bg-dark-900 rounded-lg p-3">
                           <p className="text-xs text-slate-400 mb-1">Hashrate</p>
                           <p className="text-xl font-bold text-white">{totalHashrate.toFixed(1)}</p>