temperature chart and table alignments

src/routes/weather/compare/[location]/+page.svelte

@@ -257,7 +257,8 @@
 				color: CHART_COLORS.average,
 				data: average,
 				width: 4,
-				dashed: !isColumn
+				dashed: !isColumn,
+				outline: !isColumn
 			});
 
 			const isFirst = vi === 0;
@@ -281,7 +282,7 @@
 
 <!-- ─── Page hero: location (matches the other forecast pages) ──────────────── -->
 
-<div class="mb-5 flex flex-wrap items-center justify-between gap-x-6 gap-y-3">
+<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
 	<div class="flex min-w-0 items-center gap-3">
 		<img
 			class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
@@ -302,7 +303,7 @@
 	</div>
 
 	<!-- Range / zoom controls, aligned with the title like the other pages -->
-	<div class="flex flex-wrap items-center gap-3">
+	<div class="lg:absolute lg:right-0 lg:top-20 z-40 flex flex-wrap items-center gap-3">
 		<span class="hidden text-xs text-muted-foreground lg:inline">
 			drag or
 			<kbd class="rounded border border-border bg-muted px-1 py-0.5 font-sans text-[10px]">Ctrl</kbd
@@ -362,6 +363,7 @@
 	{loading}
 	chartCount={params.hourly?.filter((v) => v !== 'weather_code').length || 1}
 	chartHeight={300}
+	bleed={false}
 >
 	{#if fetchedData}
 		{#each chartDefs as def, i (i)}