temperature chart and table alignments

src/routes/weather/week/[location]/MeteogramCharts.svelte

@@ -5,7 +5,7 @@
 
 	import { formatZoned, getRelativeDayLabel } from '$lib/utils/date';
 
-	import { ChartContainer, ChartToolbar } from '$lib/components/charts';
+	import { ChartContainer, downloadChartsPng } from '$lib/components/charts';
 
 	import { CanvasChart, groupRange } from '$lib/charts';
 
@@ -29,6 +29,17 @@
 	const CHART_HEIGHT = 300;
 
 	let customizerOpen = $state(false);
+	let downloadingPng = $state(false);
+
+	async function downloadPng(): Promise<void> {
+		if (liveCharts.length === 0 || downloadingPng) return;
+		downloadingPng = true;
+		try {
+			await downloadChartsPng(liveCharts, 'week-forecast');
+		} finally {
+			setTimeout(() => (downloadingPng = false), 500);
+		}
+	}
 
 	// Charts persist across data refetches; entries are null while unmounted.
 	let chartComponents: (CanvasChart | null)[] = $state([]);
@@ -224,6 +235,40 @@
 				</svg>
 				Customize
 			</button>
+			<button
+				type="button"
+				class="flex cursor-pointer items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-xs font-semibold text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+				disabled={liveCharts.length === 0 || downloadingPng}
+				onclick={downloadPng}
+				title="Download meteogram as PNG image"
+			>
+				{#if downloadingPng}
+					<svg
+						class="h-3.5 w-3.5 animate-spin"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+					>
+						<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+					</svg>
+				{:else}
+					<svg
+						class="h-3.5 w-3.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+						<polyline points="7 10 12 15 17 10" />
+						<line x1="12" y1="15" x2="12" y2="3" />
+					</svg>
+				{/if}
+				PNG
+			</button>
 		</div>
 	</div>
 
@@ -286,10 +331,6 @@
 				</div>
 			{/each}
 		</div>
-
-		<div class="mt-6 md:mt-10">
-			<ChartToolbar charts={liveCharts} fileName="week-forecast" />
-		</div>
 	{/if}
 </section>