daycards strip

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

@@ -42,13 +42,19 @@
 >
 	<Select.Trigger
 		aria-label="{label} selection"
-		class="group h-auto min-h-14 min-w-0 flex-1 cursor-pointer gap-3 rounded-xl border-2 border-primary/35 bg-card py-2 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-w-72 sm:flex-none"
+		class="group h-auto min-h-12 min-w-0 flex-1 cursor-pointer gap-2.5 rounded-xl border-2 border-primary/35 bg-card py-1.5 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-h-14 sm:gap-3 sm:py-2 sm:min-w-72 sm:flex-none"
 	>
 		<div
-			class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary"
+			class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary sm:size-9"
 		>
 			<!-- layered-globe icon: weather model -->
-			<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
+			<svg
+				class="size-4.5 sm:size-5"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				stroke-width="1.75"
+			>
 				<circle cx="12" cy="12" r="9" />
 				<path
 					stroke-linecap="round"
@@ -60,9 +66,14 @@
 			<span class="text-[11px] font-semibold tracking-wide text-primary uppercase">
 				{label}
 			</span>
-			<span class="max-w-full truncate text-sm font-bold text-foreground">{modelLabel}</span>
+			<span class="max-w-full truncate text-[13px] font-bold text-foreground sm:text-sm"
+				>{modelLabel}</span
+			>
 			{#if modelMeta}
-				<span class="max-w-full truncate text-[11px] leading-tight text-muted-foreground">
+				<!-- the meta line is dropped on mobile to keep the trigger compact -->
+				<span
+					class="hidden max-w-full truncate text-[11px] leading-tight text-muted-foreground sm:block"
+				>
 					{modelMeta}
 				</span>
 			{/if}