From 9eaf878346efe025b4e232e71f19ad5f592a3958 Mon Sep 17 00:00:00 2001
From: pineapplestrikesback <tomasina8@gmail.com>
Date: Sat, 24 Jan 2026 01:16:13 +0100
Subject: [PATCH 1/2] Move weekly volume above activity chart

---
 src/ui/components/TotalVolumeCard.tsx | 29 ++++++++++++++++++---------
 src/ui/pages/Dashboard.tsx            |  5 +++--
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/ui/components/TotalVolumeCard.tsx b/src/ui/components/TotalVolumeCard.tsx
index 8e4aaaa..a223b2a 100644
--- a/src/ui/components/TotalVolumeCard.tsx
+++ b/src/ui/components/TotalVolumeCard.tsx
@@ -13,7 +13,7 @@ export function TotalVolumeCard(): React.ReactElement {
   );
 
   if (isLoading) {
-    return <div className="h-32 animate-pulse rounded-lg bg-primary-500" />;
+    return <div className="h-16 animate-pulse rounded-lg bg-zinc-900" />;
   }
 
   const percentage = totalGoal > 0 ? Math.min((totalVolume / totalGoal) * 100, 100) : 0;
@@ -27,23 +27,32 @@ export function TotalVolumeCard(): React.ReactElement {
   };
 
   return (
-    <div className="rounded-lg bg-surface-raised p-6">
-      <h3 className="mb-2 text-lg font-semibold text-white">Total Weekly Volume</h3>
-
-      <div className="mb-2 flex items-baseline gap-2">
-        <span className="text-4xl font-bold text-white">{volumeDisplay}</span>
-        <span className="text-lg text-primary-200">sets</span>
+    <div className="rounded-lg border-2 border-zinc-800 bg-zinc-950 px-4 py-3">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <p className="text-xs font-bold uppercase tracking-wider text-zinc-400">
+            Total Weekly Volume
+          </p>
+          <div className="mt-1 flex items-baseline gap-2">
+            <span className="text-2xl font-black text-white">{volumeDisplay}</span>
+            <span className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+              sets
+            </span>
+          </div>
+        </div>
+        <div className="text-right">
+          <p className="text-xs font-semibold text-zinc-400">Target {totalGoal}</p>
+          <p className="text-[10px] uppercase tracking-wider text-zinc-600">sets/week</p>
+        </div>
       </div>
 
       {/* Progress Bar */}
-      <div className="mb-2 h-3 overflow-hidden rounded-full bg-primary-800">
+      <div className="mt-2 h-2 overflow-hidden rounded-full bg-zinc-800">
         <div
           className={`h-full rounded-full transition-all duration-500 ${getProgressBarClass()}`}
           style={{ width: `${percentage}%` }}
         />
       </div>
-
-      <p className="text-sm text-primary-200">Target: {totalGoal} sets/week</p>
     </div>
   );
 }
diff --git a/src/ui/pages/Dashboard.tsx b/src/ui/pages/Dashboard.tsx
index 2d5342f..2f77c42 100644
--- a/src/ui/pages/Dashboard.tsx
+++ b/src/ui/pages/Dashboard.tsx
@@ -77,6 +77,9 @@ export function Dashboard(): React.ReactElement {
         <h2 className="text-2xl font-bold text-white">Workout Overview</h2>
       </div>
 
+      {/* Total Weekly Volume */}
+      <TotalVolumeCard />
+
       {/* Weekly Activity Chart */}
       <WeeklyActivityChart />
 
@@ -95,8 +98,6 @@ export function Dashboard(): React.ReactElement {
         )}
       </div>
 
-      {/* Total Volume */}
-      <TotalVolumeCard />
     </div>
   );
 }

From 9ec6f582bff15eed72151b1a61b80a8787659526 Mon Sep 17 00:00:00 2001
From: pineapplestrikesback <tomasina8@gmail.com>
Date: Sat, 24 Jan 2026 01:44:02 +0100
Subject: [PATCH 2/2] fix: added min-h

---
 src/ui/components/TotalVolumeCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/TotalVolumeCard.tsx b/src/ui/components/TotalVolumeCard.tsx
index a223b2a..88b21f5 100644
--- a/src/ui/components/TotalVolumeCard.tsx
+++ b/src/ui/components/TotalVolumeCard.tsx
@@ -13,7 +13,7 @@ export function TotalVolumeCard(): React.ReactElement {
   );
 
   if (isLoading) {
-    return <div className="h-16 animate-pulse rounded-lg bg-zinc-900" />;
+    return <div className="min-h-[72px] animate-pulse rounded-lg bg-zinc-900" />;
   }
 
   const percentage = totalGoal > 0 ? Math.min((totalVolume / totalGoal) * 100, 100) : 0;
@@ -27,7 +27,7 @@ export function TotalVolumeCard(): React.ReactElement {
   };
 
   return (
-    <div className="rounded-lg border-2 border-zinc-800 bg-zinc-950 px-4 py-3">
+    <div className="min-h-[72px] rounded-lg border-2 border-zinc-800 bg-zinc-950 px-4 py-3">
       <div className="flex items-center justify-between gap-3">
         <div>
           <p className="text-xs font-bold uppercase tracking-wider text-zinc-400">