From cc34f5751ba258273851df0c4efd1343d1ebeab0 Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Sun, 25 Oct 2026 13:07:26 +0000
Subject: [PATCH] spotters: fix random 404 on client navigation (random is a
 page load, not an endpoint shadowed by [slug]); square logo tiles everywhere

---
 src/lib/cars/BrandBadge.svelte                | 29 ++++++++++++-------
 src/lib/cars/BrandTile.svelte                 |  4 +--
 src/lib/planes/MakerTile.svelte               |  4 +--
 src/lib/trains/MakerTile.svelte               |  4 +--
 src/routes/trackers/cars/[brand]/+page.svelte | 24 +--------------
 .../trackers/cars/random/+page.server.ts      | 11 +++++++
 src/routes/trackers/cars/random/+page.svelte  |  1 +
 src/routes/trackers/cars/random/+server.ts    |  9 ------
 .../trackers/planes/[maker]/+page.svelte      | 24 +--------------
 .../trackers/planes/random/+page.server.ts    | 11 +++++++
 .../trackers/planes/random/+page.svelte       |  1 +
 src/routes/trackers/planes/random/+server.ts  |  9 ------
 .../trackers/trains/[maker]/+page.svelte      | 24 +--------------
 .../trains/operators/[operator]/+page.svelte  | 24 +--------------
 .../trackers/trains/random/+page.server.ts    | 11 +++++++
 .../trackers/trains/random/+page.svelte       |  1 +
 src/routes/trackers/trains/random/+server.ts  |  9 ------
 .../random/{+server.ts => +page.server.ts}    |  6 ++--
 .../trackers/wildlife/random/+page.svelte     |  1 +
 19 files changed, 69 insertions(+), 138 deletions(-)
 create mode 100644 src/routes/trackers/cars/random/+page.server.ts
 create mode 100644 src/routes/trackers/cars/random/+page.svelte
 delete mode 100644 src/routes/trackers/cars/random/+server.ts
 create mode 100644 src/routes/trackers/planes/random/+page.server.ts
 create mode 100644 src/routes/trackers/planes/random/+page.svelte
 delete mode 100644 src/routes/trackers/planes/random/+server.ts
 create mode 100644 src/routes/trackers/trains/random/+page.server.ts
 create mode 100644 src/routes/trackers/trains/random/+page.svelte
 delete mode 100644 src/routes/trackers/trains/random/+server.ts
 rename src/routes/trackers/wildlife/random/{+server.ts => +page.server.ts} (55%)
 create mode 100644 src/routes/trackers/wildlife/random/+page.svelte

diff --git a/src/lib/cars/BrandBadge.svelte b/src/lib/cars/BrandBadge.svelte
index 647eca9..92ae072 100644
--- a/src/lib/cars/BrandBadge.svelte
+++ b/src/lib/cars/BrandBadge.svelte
@@ -22,11 +22,14 @@
 {/if}
 
 <style>
+	/* Every logo sits in a fixed square tile (object-fit: contain, centred, padded, neutral
+	   background), so wide wordmarks and tall crests line up in grids and lists. */
 	.badge,
 	.tile {
 		display: inline-grid;
 		place-items: center;
 		flex-shrink: 0;
+		aspect-ratio: 1;
 	}
 	.badge {
 		border-radius: 999px;
@@ -43,26 +46,31 @@
 			0 2px 8px hsl(var(--hue) 60% 20% / 0.4);
 	}
 	.tile {
+		overflow: hidden;
 		border-radius: 0.55rem;
-		background: #fff;
-		padding: 0.2rem;
+		background: #f6f6f4;
+		padding: 12%;
 		box-shadow:
 			0 0 0 1px rgb(0 0 0 / 0.08),
 			0 2px 8px rgb(0 0 0 / 0.35);
 	}
 	.tile img {
+		display: block;
 		width: 100%;
 		height: 100%;
+		min-width: 0;
+		min-height: 0;
 		object-fit: contain;
+		object-position: center;
 	}
 	.sm {
-		width: 1.9rem;
-		height: 1.9rem;
+		width: 2.1rem;
+		height: 2.1rem;
 		font-size: 0.7rem;
 	}
 	.tile.sm {
-		width: 2.6rem;
-		padding: 0.18rem 0.25rem;
+		padding: 0.2rem;
+		border-radius: 0.45rem;
 	}
 	.md {
 		width: 2.6rem;
@@ -76,19 +84,18 @@
 	}
 	.tile.lg {
 		border-radius: 1rem;
-		padding: 0.5rem;
 	}
+	/* xl fills the parent's height and stays square inside it. */
 	.xl {
-		width: 100%;
 		height: 100%;
+		max-width: 100%;
 		font-size: 1.6rem;
 	}
 	.badge.xl {
-		width: 3.6rem;
 		height: 3.6rem;
+		width: 3.6rem;
 	}
 	.tile.xl {
-		border-radius: 0.6rem;
-		padding: 0.6rem 0.8rem;
+		border-radius: 0.7rem;
 	}
 </style>
diff --git a/src/lib/cars/BrandTile.svelte b/src/lib/cars/BrandTile.svelte
index 6ef007c..e99f16e 100644
--- a/src/lib/cars/BrandTile.svelte
+++ b/src/lib/cars/BrandTile.svelte
@@ -44,10 +44,10 @@
 		display: grid;
 		place-items: center;
 		width: 100%;
-		aspect-ratio: 16 / 9;
+		aspect-ratio: 4 / 3;
 	}
 	.compact .mark {
-		aspect-ratio: 2 / 1;
+		aspect-ratio: 3 / 2;
 	}
 	.name {
 		max-width: 100%;
diff --git a/src/lib/planes/MakerTile.svelte b/src/lib/planes/MakerTile.svelte
index 6f1197c..506b8d3 100644
--- a/src/lib/planes/MakerTile.svelte
+++ b/src/lib/planes/MakerTile.svelte
@@ -44,10 +44,10 @@
 		display: grid;
 		place-items: center;
 		width: 100%;
-		aspect-ratio: 16 / 9;
+		aspect-ratio: 4 / 3;
 	}
 	.compact .mark {
-		aspect-ratio: 2 / 1;
+		aspect-ratio: 3 / 2;
 	}
 	.name {
 		max-width: 100%;
diff --git a/src/lib/trains/MakerTile.svelte b/src/lib/trains/MakerTile.svelte
index b7b1992..f9787ac 100644
--- a/src/lib/trains/MakerTile.svelte
+++ b/src/lib/trains/MakerTile.svelte
@@ -48,10 +48,10 @@
 		display: grid;
 		place-items: center;
 		width: 100%;
-		aspect-ratio: 16 / 9;
+		aspect-ratio: 4 / 3;
 	}
 	.compact .mark {
-		aspect-ratio: 2 / 1;
+		aspect-ratio: 3 / 2;
 	}
 	.name {
 		max-width: 100%;
diff --git a/src/routes/trackers/cars/[brand]/+page.svelte b/src/routes/trackers/cars/[brand]/+page.svelte
index 30429bf..09ed207 100644
--- a/src/routes/trackers/cars/[brand]/+page.svelte
+++ b/src/routes/trackers/cars/[brand]/+page.svelte
@@ -45,20 +45,7 @@
 		</figure>
 	{/if}
 	<header class="mt-6 mb-8 flex items-center gap-5">
-		{#if b.logo}
-			<img
-				class="logo"
-				src={b.logo}
-				alt="{b.name} logo"
-				title="Logo: {b.logoAuthor ?? 'Wikimedia Commons'}{b.logoLicense
-					? ` (${b.logoLicense})`
-					: ''}"
-				width="72"
-				height="72"
-			/>
-		{:else}
-			<BrandBadge name={b.name} size="lg" />
-		{/if}
+		<BrandBadge name={b.name} logo={b.logo} size="lg" />
 		<div>
 			<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
 			<p class="mt-2 text-[var(--site-muted)]">
@@ -130,15 +117,6 @@
 	.hero figcaption a {
 		text-decoration: underline;
 	}
-	.logo {
-		width: 4.5rem;
-		height: 4.5rem;
-		object-fit: contain;
-		padding: 0.5rem;
-		border-radius: 1rem;
-		background: #fff;
-		border: 1px solid var(--site-border);
-	}
 	.grid {
 		display: grid;
 		gap: 0.75rem;
diff --git a/src/routes/trackers/cars/random/+page.server.ts b/src/routes/trackers/cars/random/+page.server.ts
new file mode 100644
index 0000000..448b76b
--- /dev/null
+++ b/src/routes/trackers/cars/random/+page.server.ts
@@ -0,0 +1,11 @@
+import { redirect } from '@sveltejs/kit';
+import { randomCar } from '#lib/server/cars.js';
+import type { PageServerLoad } from './$types';
+
+// A page load (not a +server.ts endpoint): the client router only knows page routes, so an
+// endpoint here made client-side navigation fall through to the [brand] page and 404.
+export const load: PageServerLoad = async ({ setHeaders }) => {
+	const car = await randomCar();
+	setHeaders({ 'cache-control': 'no-store' });
+	redirect(303, car ? `/trackers/cars/${car.brandSlug}/${car.slug}` : '/trackers/cars');
+};
diff --git a/src/routes/trackers/cars/random/+page.svelte b/src/routes/trackers/cars/random/+page.svelte
new file mode 100644
index 0000000..aa432c5
--- /dev/null
+++ b/src/routes/trackers/cars/random/+page.svelte
@@ -0,0 +1 @@
+<!-- Never rendered: the load always redirects to a random entry. -->
diff --git a/src/routes/trackers/cars/random/+server.ts b/src/routes/trackers/cars/random/+server.ts
deleted file mode 100644
index 57f8c19..0000000
--- a/src/routes/trackers/cars/random/+server.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-import { randomCar } from '#lib/server/cars.js';
-import type { RequestHandler } from './$types';
-
-export const GET: RequestHandler = async ({ setHeaders }) => {
-	const car = await randomCar();
-	setHeaders({ 'cache-control': 'no-store' });
-	redirect(303, car ? `/trackers/cars/${car.brandSlug}/${car.slug}` : '/trackers/cars');
-};
diff --git a/src/routes/trackers/planes/[maker]/+page.svelte b/src/routes/trackers/planes/[maker]/+page.svelte
index 3d98137..83f903c 100644
--- a/src/routes/trackers/planes/[maker]/+page.svelte
+++ b/src/routes/trackers/planes/[maker]/+page.svelte
@@ -45,20 +45,7 @@
 		</figure>
 	{/if}
 	<header class="mt-6 mb-8 flex items-center gap-5">
-		{#if b.logo}
-			<img
-				class="logo"
-				src={b.logo}
-				alt="{b.name} logo"
-				title="Logo: {b.logoAuthor ?? 'Wikimedia Commons'}{b.logoLicense
-					? ` (${b.logoLicense})`
-					: ''}"
-				width="72"
-				height="72"
-			/>
-		{:else}
-			<BrandBadge name={b.name} size="lg" />
-		{/if}
+		<BrandBadge name={b.name} logo={b.logo} size="lg" />
 		<div>
 			<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
 			{#if b.fullName && b.fullName !== b.name}<p class="mt-1 text-sm text-[var(--site-muted)]">
@@ -134,15 +121,6 @@
 	.hero figcaption a {
 		text-decoration: underline;
 	}
-	.logo {
-		width: 4.5rem;
-		height: 4.5rem;
-		object-fit: contain;
-		padding: 0.5rem;
-		border-radius: 1rem;
-		background: #fff;
-		border: 1px solid var(--site-border);
-	}
 	.grid {
 		display: grid;
 		gap: 0.75rem;
diff --git a/src/routes/trackers/planes/random/+page.server.ts b/src/routes/trackers/planes/random/+page.server.ts
new file mode 100644
index 0000000..037bf6c
--- /dev/null
+++ b/src/routes/trackers/planes/random/+page.server.ts
@@ -0,0 +1,11 @@
+import { redirect } from '@sveltejs/kit';
+import { randomPlane } from '#lib/server/planes.js';
+import type { PageServerLoad } from './$types';
+
+// A page load (not a +server.ts endpoint): the client router only knows page routes, so an
+// endpoint here made client-side navigation fall through to the [maker] page and 404.
+export const load: PageServerLoad = async ({ setHeaders }) => {
+	const plane = await randomPlane();
+	setHeaders({ 'cache-control': 'no-store' });
+	redirect(303, plane ? `/trackers/planes/${plane.makerSlug}/${plane.slug}` : '/trackers/planes');
+};
diff --git a/src/routes/trackers/planes/random/+page.svelte b/src/routes/trackers/planes/random/+page.svelte
new file mode 100644
index 0000000..aa432c5
--- /dev/null
+++ b/src/routes/trackers/planes/random/+page.svelte
@@ -0,0 +1 @@
+<!-- Never rendered: the load always redirects to a random entry. -->
diff --git a/src/routes/trackers/planes/random/+server.ts b/src/routes/trackers/planes/random/+server.ts
deleted file mode 100644
index 87ace94..0000000
--- a/src/routes/trackers/planes/random/+server.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-import { randomPlane } from '#lib/server/planes.js';
-import type { RequestHandler } from './$types';
-
-export const GET: RequestHandler = async ({ setHeaders }) => {
-	const plane = await randomPlane();
-	setHeaders({ 'cache-control': 'no-store' });
-	redirect(303, plane ? `/trackers/planes/${plane.makerSlug}/${plane.slug}` : '/trackers/planes');
-};
diff --git a/src/routes/trackers/trains/[maker]/+page.svelte b/src/routes/trackers/trains/[maker]/+page.svelte
index 206045b..ae7bf0b 100644
--- a/src/routes/trackers/trains/[maker]/+page.svelte
+++ b/src/routes/trackers/trains/[maker]/+page.svelte
@@ -45,20 +45,7 @@
 		</figure>
 	{/if}
 	<header class="mt-6 mb-8 flex items-center gap-5">
-		{#if b.logo}
-			<img
-				class="logo"
-				src={b.logo}
-				alt="{b.name} logo"
-				title="Logo: {b.logoAuthor ?? 'Wikimedia Commons'}{b.logoLicense
-					? ` (${b.logoLicense})`
-					: ''}"
-				width="72"
-				height="72"
-			/>
-		{:else}
-			<BrandBadge name={b.name} size="lg" />
-		{/if}
+		<BrandBadge name={b.name} logo={b.logo} size="lg" />
 		<div>
 			<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
 			{#if b.fullName && b.fullName !== b.name}<p class="mt-1 text-sm text-[var(--site-muted)]">
@@ -134,15 +121,6 @@
 	.hero figcaption a {
 		text-decoration: underline;
 	}
-	.logo {
-		width: 4.5rem;
-		height: 4.5rem;
-		object-fit: contain;
-		padding: 0.5rem;
-		border-radius: 1rem;
-		background: #fff;
-		border: 1px solid var(--site-border);
-	}
 	.grid {
 		display: grid;
 		gap: 0.75rem;
diff --git a/src/routes/trackers/trains/operators/[operator]/+page.svelte b/src/routes/trackers/trains/operators/[operator]/+page.svelte
index 7c708af..e7f9508 100644
--- a/src/routes/trackers/trains/operators/[operator]/+page.svelte
+++ b/src/routes/trackers/trains/operators/[operator]/+page.svelte
@@ -44,20 +44,7 @@
 		</figure>
 	{/if}
 	<header class="mt-6 mb-8 flex items-center gap-5">
-		{#if b.logo}
-			<img
-				class="logo"
-				src={b.logo}
-				alt="{b.name} logo"
-				title="Logo: {b.logoAuthor ?? 'Wikimedia Commons'}{b.logoLicense
-					? ` (${b.logoLicense})`
-					: ''}"
-				width="72"
-				height="72"
-			/>
-		{:else}
-			<BrandBadge name={b.name} size="lg" />
-		{/if}
+		<BrandBadge name={b.name} logo={b.logo} size="lg" />
 		<div>
 			<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
 			{#if b.fullName && b.fullName !== b.name}<p class="mt-1 text-sm text-[var(--site-muted)]">
@@ -131,15 +118,6 @@
 	.hero figcaption a {
 		text-decoration: underline;
 	}
-	.logo {
-		width: 4.5rem;
-		height: 4.5rem;
-		object-fit: contain;
-		padding: 0.5rem;
-		border-radius: 1rem;
-		background: #fff;
-		border: 1px solid var(--site-border);
-	}
 	.grid {
 		display: grid;
 		gap: 0.75rem;
diff --git a/src/routes/trackers/trains/random/+page.server.ts b/src/routes/trackers/trains/random/+page.server.ts
new file mode 100644
index 0000000..ca8fa16
--- /dev/null
+++ b/src/routes/trackers/trains/random/+page.server.ts
@@ -0,0 +1,11 @@
+import { redirect } from '@sveltejs/kit';
+import { randomTrain } from '#lib/server/trains.js';
+import type { PageServerLoad } from './$types';
+
+// A page load (not a +server.ts endpoint): the client router only knows page routes, so an
+// endpoint here made client-side navigation fall through to the [maker] page and 404.
+export const load: PageServerLoad = async ({ setHeaders }) => {
+	const train = await randomTrain();
+	setHeaders({ 'cache-control': 'no-store' });
+	redirect(303, train ? `/trackers/trains/${train.makerSlug}/${train.slug}` : '/trackers/trains');
+};
diff --git a/src/routes/trackers/trains/random/+page.svelte b/src/routes/trackers/trains/random/+page.svelte
new file mode 100644
index 0000000..aa432c5
--- /dev/null
+++ b/src/routes/trackers/trains/random/+page.svelte
@@ -0,0 +1 @@
+<!-- Never rendered: the load always redirects to a random entry. -->
diff --git a/src/routes/trackers/trains/random/+server.ts b/src/routes/trackers/trains/random/+server.ts
deleted file mode 100644
index d498dc0..0000000
--- a/src/routes/trackers/trains/random/+server.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-import { randomTrain } from '#lib/server/trains.js';
-import type { RequestHandler } from './$types';
-
-export const GET: RequestHandler = async ({ setHeaders }) => {
-	const train = await randomTrain();
-	setHeaders({ 'cache-control': 'no-store' });
-	redirect(303, train ? `/trackers/trains/${train.makerSlug}/${train.slug}` : '/trackers/trains');
-};
diff --git a/src/routes/trackers/wildlife/random/+server.ts b/src/routes/trackers/wildlife/random/+page.server.ts
similarity index 55%
rename from src/routes/trackers/wildlife/random/+server.ts
rename to src/routes/trackers/wildlife/random/+page.server.ts
index f840552..2837cb7 100644
--- a/src/routes/trackers/wildlife/random/+server.ts
+++ b/src/routes/trackers/wildlife/random/+page.server.ts
@@ -1,8 +1,10 @@
 import { redirect } from '@sveltejs/kit';
 import { randomSpecies } from '#lib/server/wildlife.js';
-import type { RequestHandler } from './$types';
+import type { PageServerLoad } from './$types';
 
-export const GET: RequestHandler = async ({ setHeaders, url }) => {
+// A page load (not a +server.ts endpoint): the client router only knows page routes, so an
+// endpoint here made client-side navigation fall through to the [group] page and 404.
+export const load: PageServerLoad = async ({ setHeaders, url }) => {
 	const group = (url.searchParams.get('group') ?? '').replace(/[^a-z0-9-]/g, '') || undefined;
 	const s = await randomSpecies(group);
 	setHeaders({ 'cache-control': 'no-store' });
diff --git a/src/routes/trackers/wildlife/random/+page.svelte b/src/routes/trackers/wildlife/random/+page.svelte
new file mode 100644
index 0000000..aa432c5
--- /dev/null
+++ b/src/routes/trackers/wildlife/random/+page.svelte
@@ -0,0 +1 @@
+<!-- Never rendered: the load always redirects to a random entry. -->