temperature chart and table alignments

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

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { SvelteDate } from 'svelte/reactivity';
 	import { get } from 'svelte/store';
+	import { fade } from 'svelte/transition';
 
 	import {
 		storedChartLayout,
@@ -152,7 +153,7 @@
 <div class="week-page">
 	<div class="weather-content" style="min-height: 50vh">
 		<!-- Page hero: prominent location + weather model selection -->
-		<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"
@@ -174,7 +175,7 @@
 				</div>
 			</div>
 
-			<div class="flex w-full min-w-0 items-center gap-3 sm:w-auto">
+			<div class="lg:absolute lg:right-0 lg:top-0 flex w-full min-w-0 items-center gap-3 sm:w-auto">
 				<ModelSelector
 					selectedModel={params.models?.[0] ?? 'best_match'}
 					onModelChange={(model) => {
@@ -220,14 +221,17 @@
 			/>
 		{:else}
 			<!-- placeholder with the table's approximate height: no layout shift -->
-			<div class="h-[430px] animate-pulse rounded-2xl border border-border/70 bg-card"></div>
+			<div
+				transition:fade={{ duration: 200 }}
+				class="h-[430px] animate-pulse rounded-2xl border border-border/70 bg-card"
+			></div>
 		{/if}
 
 		{#if fetchedHourly}
 			<MeteogramCharts data={fetchedHourly} {selectedDay} units={params} {loading} />
 		{:else}
 			<!-- reserve the exact chart area height before the first fetch resolves -->
-			<section class="mt-8">
+			<section class="mt-8" transition:fade={{ duration: 200 }}>
 				<ChartContainer loading chartCount={enabledChartCount || 1} chartHeight={300} />
 			</section>
 		{/if}