daycards strip

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

@@ -18,6 +18,7 @@
 
 	import { defaultParameters } from '../../options';
 	import DailyCards from './DailyCards.svelte';
+	import DailyStripSticky from './DailyStripSticky.svelte';
 	import HourlyTable from './HourlyTable.svelte';
 	import MeteogramCharts from './MeteogramCharts.svelte';
 	import ModelSelector from './ModelSelector.svelte';
@@ -199,33 +200,55 @@
 			</div>
 		{/if}
 
-		<DailyCards
-			daily={fetchedDaily}
-			{selectedDay}
-			units={params}
-			onSelectDay={switchDay}
-			canExtend={forecastDays < 15}
-			onExtend={() => (forecastDays = 15)}
-			canExtendPast={pastDays < 3}
-			onExtendPast={() => (pastDays = 3)}
-		/>
-
-		{#if fetchedHourly && fetchedDaily}
-			<HourlyTable
-				data={fetchedHourly}
+		<!-- Desktop: the full day cards -->
+		<div class="hidden md:block">
+			<DailyCards
 				daily={fetchedDaily}
 				{selectedDay}
 				units={params}
-				locationName={location.name ?? ''}
-				onCustomize={() => (variableSidebarOpen = true)}
+				onSelectDay={switchDay}
+				canExtend={forecastDays < 15}
+				onExtend={() => (forecastDays = 15)}
+				canExtendPast={pastDays < 3}
+				onExtendPast={() => (pastDays = 3)}
 			/>
-		{:else}
-			<!-- placeholder with the table's approximate height: no layout shift -->
-			<div
-				transition:fade={{ duration: 200 }}
-				class="h-[430px] animate-pulse rounded-2xl border border-border/70 bg-card"
-			></div>
-		{/if}
+		</div>
+
+		<!-- Mobile: a compact day strip and the hourly table share this wrapper, so
+		     the strip stays stuck (collapsing as it goes) while scrolling the table
+		     and then releases exactly at the table's bottom, freeing the meteograms.
+		     The strip itself is hidden on md+ (the desktop cards above take over). -->
+		<div>
+			{#if fetchedDaily}
+				<DailyStripSticky
+					daily={fetchedDaily}
+					{selectedDay}
+					units={params}
+					onSelectDay={switchDay}
+					canExtend={forecastDays < 15}
+					onExtend={() => (forecastDays = 15)}
+					canExtendPast={pastDays < 3}
+					onExtendPast={() => (pastDays = 3)}
+				/>
+			{/if}
+
+			{#if fetchedHourly && fetchedDaily}
+				<HourlyTable
+					data={fetchedHourly}
+					daily={fetchedDaily}
+					{selectedDay}
+					units={params}
+					locationName={location.name ?? ''}
+					onCustomize={() => (variableSidebarOpen = true)}
+				/>
+			{:else}
+				<!-- placeholder with the table's approximate height: no layout shift -->
+				<div
+					transition:fade={{ duration: 200 }}
+					class="h-107.5 animate-pulse rounded-2xl border border-border/70 bg-card"
+				></div>
+			{/if}
+		</div>
 
 		{#if fetchedHourly}
 			<MeteogramCharts data={fetchedHourly} {selectedDay} units={params} {loading} />