prices: line the tab bar up with the full-width CS skins page

src/lib/price-trackers.ts

@@ -14,6 +14,8 @@ export type PriceTab = {
 	href: string;
 	/** Owner-only: hidden from the tab bar for everyone else, and the route 404s for them. */
 	private: boolean;
+	/** The page is full-width (max 1600px, like CS prices): line the tab bar up with it. */
+	wide?: boolean;
 };
 
 export const priceTabs: readonly PriceTab[] = [
@@ -31,7 +33,8 @@ export const priceTabs: readonly PriceTab[] = [
 		icon: 'skins',
 		subtitle: 'Counter-Strike skin market prices across time',
 		href: '/trackers/prices/cs',
-		private: false
+		private: false,
+		wide: true
 	}
 ];
 

src/routes/trackers/prices/+layout.svelte

@@ -8,7 +8,19 @@
 
 	let { children } = $props();
 	const tabs = $derived(visiblePriceTabs(Boolean(page.data.isOwner)));
+	const wide = $derived(
+		tabs.find((t) => page.url.pathname === t.href || page.url.pathname.startsWith(`${t.href}/`))
+			?.wide
+	);
 </script>
 
-<SpottingSwitcher items={tabs} home="/trackers/prices" label="prices" homeIcon={Tag} />
+<SpottingSwitcher
+	items={tabs}
+	home="/trackers/prices"
+	label="prices"
+	homeIcon={Tag}
+	class={wide
+		? 'relative mx-auto -mb-6 max-w-[1600px] px-[clamp(1rem,4vw,4rem)] pt-6 sm:-mb-8 sm:pt-8'
+		: undefined}
+/>
 {@render children()}