From 027aee434c04dfde44844c9d42028b25ff4e1e09 Mon Sep 17 00:00:00 2001
From: sieren <matthias@s-r-n.de>
Date: Thu, 8 Jan 2026 13:24:40 +0100
Subject: [PATCH] Mobile: Only show total of stacks

The detailed display of stacks (following x/x/x/x) is too wide
for mobile display.
So for mobile display only, we limit this information to the total number
of stacks.
---
 src/routes/+page.svelte                           |  1 +
 src/routes/dashboard/EnvironmentTile.svelte       | 15 ++++++++-------
 .../dashboard/dashboard-resource-stats.svelte     |  5 +++--
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2a206df..ff79a1a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -994,6 +994,7 @@
 									width={2}
 									height={Math.max(item.h, 2)}
 									oneventsclick={() => handleEventsClick(tile.stats!.id)}
+									showStacksBreakdown={false}
 								/>
 							</div>
 						{/if}
diff --git a/src/routes/dashboard/EnvironmentTile.svelte b/src/routes/dashboard/EnvironmentTile.svelte
index 04f5d07..1f170f3 100644
--- a/src/routes/dashboard/EnvironmentTile.svelte
+++ b/src/routes/dashboard/EnvironmentTile.svelte
@@ -26,9 +26,10 @@
 		width?: number;
 		height?: number;
 		oneventsclick?: () => void;
+		showStacksBreakdown?: boolean;
 	}
 
-	let { stats, width = 1, height = 1, oneventsclick }: Props = $props();
+	let { stats, width = 1, height = 1, oneventsclick, showStacksBreakdown = true }: Props = $props();
 
 	const EnvIcon = $derived(getIconComponent(stats.icon));
 
@@ -349,7 +350,7 @@
 					{#if stats.collectMetrics && stats.metrics}
 						<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
 					{/if}
-					<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
+					<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
 					<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
 				</div>
 			{/if}
@@ -450,7 +451,7 @@
 					{#if stats.collectMetrics && stats.metrics}
 						<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
 					{/if}
-					<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
+					<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
 					<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
 					{#if stats.recentEvents}
 						<DashboardRecentEvents events={stats.recentEvents} limit={8} onclick={oneventsclick} />
@@ -554,7 +555,7 @@
 					{#if stats.collectMetrics && stats.metrics}
 						<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
 					{/if}
-					<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
+					<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
 					<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
 					{#if stats.recentEvents}
 						<DashboardRecentEvents events={stats.recentEvents} limit={8} onclick={oneventsclick} />
@@ -599,7 +600,7 @@
 						{#if stats.metrics}
 							<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
 						{/if}
-						<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
+						<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
 						<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
 					</div>
 					<!-- Right column -->
@@ -645,7 +646,7 @@
 						{#if stats.metrics}
 							<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
 						{/if}
-						<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
+						<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
 						<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
 						{#if stats.recentEvents}
 							<DashboardRecentEvents events={stats.recentEvents} limit={5} onclick={oneventsclick} />
@@ -697,7 +698,7 @@
 						{#if stats.metrics}
 							<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
 						{/if}
-						<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
+						<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
 						<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
 						{#if stats.recentEvents}
 							<DashboardRecentEvents events={stats.recentEvents} limit={10} onclick={oneventsclick} />
diff --git a/src/routes/dashboard/dashboard-resource-stats.svelte b/src/routes/dashboard/dashboard-resource-stats.svelte
index 5dd3457..321c15f 100644
--- a/src/routes/dashboard/dashboard-resource-stats.svelte
+++ b/src/routes/dashboard/dashboard-resource-stats.svelte
@@ -14,9 +14,10 @@
 		networks: { total: number };
 		stacks: { total: number; running: number; partial: number; stopped: number };
 		loading?: LoadingStates;
+		showStacksBreakdown?: boolean;
 	}
 
-	let { images, volumes, networks, stacks, loading }: Props = $props();
+	let { images, volumes, networks, stacks, loading, showStacksBreakdown = true }: Props = $props();
 
 	// Only show skeleton if loading AND we don't have data yet
 	// This prevents blinking when refreshing with existing data
@@ -46,7 +47,7 @@
 		{:else}
 			<span class="font-medium">
 				{stacks.total}
-				{#if stacks.total > 0}
+				{#if showStacksBreakdown && stacks.total > 0}
 					<span class="text-emerald-500">{stacks.running}</span>/<span class="text-amber-500">{stacks.partial}</span>/<span class="text-red-500">{stacks.stopped}</span>
 				{/if}
 			</span>