revamp week view: unit selector, redesigned day cards, richer meteograms and extended forecast

src/lib/components/charts/ChartContainer.svelte

@@ -33,6 +33,8 @@
 		extraPadding?: number;
 		/** Minimum chart width in pixels; narrower viewports scroll sideways (default: 560) */
 		minWidth?: number;
+		/** Bleed the chart into the page gutters (edge-to-edge). Off when nested in a card. */
+		bleed?: boolean;
 		/** Optional CSS class for the outer wrapper */
 		class?: string;
 		/** Slot content (charts go here) */
@@ -45,6 +47,7 @@
 		chartHeight = 300,
 		extraPadding = 2,
 		minWidth = 560,
+		bleed = true,
 		class: className = '',
 		children
 	}: Props = $props();
@@ -54,11 +57,11 @@
 	let minHeight = $derived(chartHeight * chartCount + extraPadding);
 </script>
 
-<div class="chart-bleed">
+<div class="chart-bleed" class:no-bleed={!bleed}>
 	<div
 		class="chart-container relative {className}"
 		style:min-height="{minHeight}px"
-		style:min-width="{minWidth}px"
+		style="--chart-min-width: {minWidth}px"
 	>
 		<!-- Chart content area -->
 		<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
@@ -100,18 +103,41 @@
 	.chart-bleed {
 		/* Bleed exactly into the page padding on mobile (main has p-5 =
 		   1.25rem) for edge-to-edge charts, and a bit past the content
-		   column on md+ (main has 2rem padding) for extra readability.
-		   Charts narrower than their min-width scroll sideways. */
+		   column on md+ (main has 2rem padding) for extra readability. */
 		margin-left: -1.25rem;
 		margin-right: -1.25rem;
 		overflow-x: auto;
 	}
 
+	.chart-bleed.no-bleed {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	.chart-container {
+		min-width: var(--chart-min-width);
+	}
+
+	/* Mobile: fit the chart to the viewport instead of forcing a min-width
+	   sideways scroll (which fights touch inspection). Pinch to zoom for detail. */
+	@media (max-width: 767px) {
+		.chart-container {
+			min-width: 0;
+		}
+		.chart-bleed {
+			overflow-x: hidden;
+		}
+	}
+
 	@media (min-width: 768px) {
 		.chart-bleed {
 			margin-left: -1.5rem;
 			margin-right: -1.5rem;
 		}
+		.chart-bleed.no-bleed {
+			margin-left: 0;
+			margin-right: 0;
+		}
 	}
 
 	.chart-content {