From d9cc4f39dd85eeb3c9b5dcfa02bec431eb11db87 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Sun, 28 Dec 2025 05:38:33 +0100
Subject: [PATCH] fix(mobile): prevent sparkline chart overflow on small
 screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add min-w-0 to flex containers to allow proper shrinking
- Hide sparklines below 400px viewport width
- Add flex-shrink-0 and overflow-hidden to sparkline containers
- Reduce font sizes and gaps on mobile for better fit

Affects CpuCard, MemoryCard, and GpuCard sparkline displays.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/lib/components/cards/CpuCard.svelte   |  8 ++++----
 frontend/src/lib/components/cards/GpuCard.svelte   | 14 +++++++-------
 .../src/lib/components/cards/MemoryCard.svelte     | 14 +++++++-------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/cards/CpuCard.svelte b/frontend/src/lib/components/cards/CpuCard.svelte
index 05c3396..73cf1b2 100644
--- a/frontend/src/lib/components/cards/CpuCard.svelte
+++ b/frontend/src/lib/components/cards/CpuCard.svelte
@@ -17,8 +17,8 @@
 	{#if $cpuStats}
 		<div class="space-y-5">
 			<!-- Total usage with large display -->
-			<div class="flex items-center gap-4 sm:gap-6">
-				<div class="flex-1">
+			<div class="flex items-center gap-3 sm:gap-6">
+				<div class="flex-1 min-w-0">
 					<div class="flex items-end gap-2 sm:gap-3 mb-2">
 						<span class="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
 							{$cpuStats.totalUsage.toFixed(1)}%
@@ -27,8 +27,8 @@
 					</div>
 					<ProgressBar value={$cpuStats.totalUsage} color="auto" showLabel={false} size="lg" />
 				</div>
-				<div class="w-24 h-12 sm:w-32 sm:h-16">
-					<SparkLine data={$cpuHistory} width={128} height={64} color="#3b82f6" />
+				<div class="hidden min-[400px]:block flex-shrink-0 w-20 h-10 sm:w-28 sm:h-14 overflow-hidden">
+					<SparkLine data={$cpuHistory} width={112} height={56} color="#3b82f6" />
 				</div>
 			</div>
 
diff --git a/frontend/src/lib/components/cards/GpuCard.svelte b/frontend/src/lib/components/cards/GpuCard.svelte
index 96ae19d..af9af6b 100644
--- a/frontend/src/lib/components/cards/GpuCard.svelte
+++ b/frontend/src/lib/components/cards/GpuCard.svelte
@@ -19,18 +19,18 @@
 
 			<div class="space-y-5">
 				<!-- Utilization -->
-				<div class="flex items-center gap-6">
-					<div class="flex-1">
-						<div class="flex items-end gap-3 mb-2">
-							<span class="text-4xl font-bold bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text text-transparent">
+				<div class="flex items-center gap-3 sm:gap-6">
+					<div class="flex-1 min-w-0">
+						<div class="flex items-end gap-2 sm:gap-3 mb-2">
+							<span class="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text text-transparent">
 								{$gpuStats.utilization}%
 							</span>
-							<span class="text-slate-400 text-sm mb-1">GPU</span>
+							<span class="text-slate-400 text-xs sm:text-sm mb-1">GPU</span>
 						</div>
 						<ProgressBar value={$gpuStats.utilization} color="orange" showLabel={false} size="lg" />
 					</div>
-					<div class="w-32 h-16">
-						<SparkLine data={$gpuHistory} width={128} height={64} color="#f97316" />
+					<div class="hidden min-[400px]:block flex-shrink-0 w-20 h-10 sm:w-28 sm:h-14 overflow-hidden">
+						<SparkLine data={$gpuHistory} width={112} height={56} color="#f97316" />
 					</div>
 				</div>
 
diff --git a/frontend/src/lib/components/cards/MemoryCard.svelte b/frontend/src/lib/components/cards/MemoryCard.svelte
index 6684199..6e9c27c 100644
--- a/frontend/src/lib/components/cards/MemoryCard.svelte
+++ b/frontend/src/lib/components/cards/MemoryCard.svelte
@@ -13,18 +13,18 @@
 
 		<div class="space-y-5">
 			<!-- Main memory display -->
-			<div class="flex items-center gap-6">
-				<div class="flex-1">
-					<div class="flex items-end gap-3 mb-2">
-						<span class="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+			<div class="flex items-center gap-3 sm:gap-6">
+				<div class="flex-1 min-w-0">
+					<div class="flex items-end gap-2 sm:gap-3 mb-2">
+						<span class="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
 							{usedPercent.toFixed(1)}%
 						</span>
-						<span class="text-slate-400 text-sm mb-1">used</span>
+						<span class="text-slate-400 text-xs sm:text-sm mb-1">used</span>
 					</div>
 					<ProgressBar value={usedPercent} color="purple" showLabel={false} size="lg" />
 				</div>
-				<div class="w-32 h-16">
-					<SparkLine data={$memoryHistory} width={128} height={64} color="#8b5cf6" />
+				<div class="hidden min-[400px]:block flex-shrink-0 w-20 h-10 sm:w-28 sm:h-14 overflow-hidden">
+					<SparkLine data={$memoryHistory} width={112} height={56} color="#8b5cf6" />
 				</div>
 			</div>