spektrumrf · jonaswesterlund · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 		%sveltekit.head%
 	</head>
 

diff --git a/src/lib/components/AddFeat.svelte b/src/lib/components/AddFeat.svelte
@@ -23,7 +23,7 @@
 >
 	<label for="addFeat" class="absolute inset-0 cursor-default"></label>
 	<div
-		class="relative mx-auto max-h-[90vh] w-full max-w-lg border-4 border-stone-900 bg-white p-6 shadow-[8px_8px_0px_0px_rgba(28,25,23,1)] transition-transform duration-200 peer-checked:scale-100 sm:p-8"
+		class="relative mx-auto max-h-[90vh] w-full max-w-lg overflow-y-auto border-4 border-stone-900 bg-white p-6 shadow-[8px_8px_0px_0px_rgba(28,25,23,1)] transition-transform duration-200 peer-checked:scale-100 sm:p-8"
 	>
 		<h3 class="mb-8 font-mono text-2xl font-black tracking-tight text-brand-900 uppercase">
 			Ny prestation
@@ -44,6 +44,7 @@
 				min={0}
 				max={15}
 				step="0.01"
+				inputmode="decimal"
 				description="Ange 0-15 poäng. Lämna som 0 om du är osäker."
 			/>
 
@@ -55,7 +56,7 @@
 					>
 						Plats
 					</label>
-					<span class="font-mono text-[10px] font-black tracking-widest text-brand-600 uppercase"
+					<span class="font-mono text-xs font-black tracking-widest text-brand-600 uppercase"
 						>Specialkrogar *</span
 					>
 				</div>

diff --git a/src/lib/components/EditFeat.svelte b/src/lib/components/EditFeat.svelte
@@ -61,7 +61,14 @@
 				}}
 				class="space-y-6"
 			>
-				<Input name="points" value={feat.points} type="number" label="Poäng" step="0.01" />
+				<Input
+					name="points"
+					value={feat.points}
+					type="number"
+					label="Poäng"
+					step="0.01"
+					inputmode="decimal"
+				/>
 
 				<div class="w-full">
 					<label

diff --git a/src/lib/components/EditTeam.svelte b/src/lib/components/EditTeam.svelte
@@ -82,6 +82,7 @@
 				value={selectedTeam?.coefficient || 1}
 				type="number"
 				step="0.01"
+				inputmode="decimal"
 				label="Lagets koefficient"
 			/>
 			<Input name="id" value={selectedTeam?.id} type="hidden" />

diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
@@ -11,6 +11,16 @@
 	export let max: number | null = null;
 	export let required: boolean = false;
 	export let description: string = '';
+	export let inputmode:
+		| 'none'
+		| 'text'
+		| 'decimal'
+		| 'numeric'
+		| 'tel'
+		| 'search'
+		| 'email'
+		| 'url'
+		| null = null;
 </script>
 
 <div class="w-full">
@@ -24,9 +34,11 @@
 			</label>
 			{#if altLabel}
 				<span
-					class="text-right font-mono text-[10px] leading-none font-black tracking-widest text-brand-600 uppercase"
+					class="text-right font-mono text-xs leading-none font-black tracking-widest text-brand-600 uppercase"
 					>{altLabel}</span
 				>
+			{:else}
+				<div class="h-1"></div>
 			{/if}
 		</div>
 	{/if}
@@ -41,11 +53,12 @@
 		{min}
 		{max}
 		{required}
+		{inputmode}
 		class="input-field"
 	/>
 	{#if description}
 		<p
-			class="mt-2 font-mono text-[10px] leading-tight font-bold tracking-widest text-stone-500 uppercase"
+			class="mt-2 font-mono text-xs leading-tight font-bold tracking-widest text-stone-500 uppercase"
 		>
 			{description}
 		</p>

diff --git a/src/lib/pocketbase.ts b/src/lib/pocketbase.ts
@@ -3,14 +3,18 @@ import { browser } from '$app/environment';
 import PocketBase from 'pocketbase';
 import { dev } from '$app/environment';
 
+export const POCKETBASE_URL_PUBLIC =
+	PUBLIC_ENV === 'DEV'
+		? 'https://db-dev.tracker.vasagatan.fi'
+		: 'https://db.tracker.vasagatan.fi';
+
+export const POCKETBASE_URL_INTERNAL = 'http://pocketbase:8080';
+
 export async function getClient(cookie: string) {
-	let pocketbaseUrl = 'http://pocketbase:8080';
+	let pocketbaseUrl = POCKETBASE_URL_INTERNAL;
 
 	if (browser || dev) {
-		pocketbaseUrl =
-			PUBLIC_ENV === 'DEV'
-				? 'https://db-dev.tracker.vasagatan.fi'
-				: 'https://db.tracker.vasagatan.fi';
+		pocketbaseUrl = POCKETBASE_URL_PUBLIC;
 	}
 
 	const client = new PocketBase(pocketbaseUrl);

diff --git a/src/routes/[year]/+layout.server.ts b/src/routes/[year]/+layout.server.ts
@@ -1,5 +1,6 @@
 import type { Account, Event, Feat, Location } from '$lib/stores';
 import type { LayoutServerLoad } from './$types';
+import { POCKETBASE_URL_INTERNAL, POCKETBASE_URL_PUBLIC } from '$lib/pocketbase';
 
 export const load: LayoutServerLoad = async function ({ locals, params }): Promise<Data> {
 	const account = locals.client.authStore.model;
@@ -16,7 +17,9 @@ export const load: LayoutServerLoad = async function ({ locals, params }): Promi
 		.then((feats) =>
 			feats.map((f: any) => ({
 				...f,
-				proofUrls: f.proofs.map((p: string) => locals.client.files.getUrl(f, p))
+				proofUrls: f.proofs.map((p: string) =>
+					locals.client.files.getURL(f, p).replace(POCKETBASE_URL_INTERNAL, POCKETBASE_URL_PUBLIC)
+				)
 			}))
 		)
 		.catch(() => []);

diff --git a/src/routes/[year]/+layout.svelte b/src/routes/[year]/+layout.svelte
@@ -77,7 +77,7 @@
 </script>
 
 <div class="flex min-h-screen flex-col bg-stone-100">
-	<header class="sticky top-0 z-50 border-b-4 border-stone-900 bg-white">
+	<header class="sticky top-0 z-50 border-b-4 border-stone-900 bg-white pt-safe">
 		<div class="mx-auto flex h-16 max-w-4xl items-center justify-between px-4 sm:px-6">
 			<!-- Left Slot: Branding -->
 			<div class="flex items-center">
@@ -91,7 +91,7 @@
 						>tracker</span
 					>
 					{#if PUBLIC_ENV === 'DEV'}
-						<span class="ml-2 hidden text-[10px] text-stone-400 sm:inline"
+						<span class="ml-2 hidden text-xs text-stone-400 sm:inline"
 							>{PUBLIC_ENV === 'DEV' ? 'DEV' : ''}</span
 						>
 					{/if}

diff --git a/src/routes/[year]/login/+page.svelte b/src/routes/[year]/login/+page.svelte
@@ -85,7 +85,13 @@
 						on:submit={() => (resetLoading = true)}
 						class="space-y-6"
 					>
-						<Input name="email" type="email" label="Epost" required={true} />
+						<Input
+							name="email"
+							type="email"
+							label="Epost"
+							required={true}
+							inputmode="email"
+						/>
 						<button class="btn-secondary w-full">
 							<Loading loading={resetLoading}>Nollställ lösenord</Loading>
 						</button>

diff --git a/src/routes/[year]/register/+page.svelte b/src/routes/[year]/register/+page.svelte
@@ -55,7 +55,7 @@
 					name="password"
 					type="password"
 					label="Lösenord"
-					description="Minst 8 tecken långt och svårgissat."
+					description="Minst 8 tecken."
 					value={form?.data?.password ?? ''}
 				/>
 				{#if form?.errors?.password}
@@ -87,6 +87,7 @@
 					label="Epost"
 					description="Används för att återställa lösenord."
 					value={form?.data?.email ?? ''}
+					inputmode="email"
 				/>
 				{#if form?.errors?.email}
 					<p class="font-mono text-xs font-bold tracking-wider text-red-600 uppercase">
@@ -100,7 +101,7 @@
 					name="name"
 					type="text"
 					label="Lagnamn"
-					description="Det publika namnet på ert lag."
+					description="Namnet som visas åt andra."
 					value={form?.data?.name ?? ''}
 				/>
 				{#if form?.errors?.name}
@@ -115,7 +116,7 @@
 					name="members"
 					type="text"
 					label="Medlemmar"
-					description="Lista på lagmedlemmar (t.ex. förnamn)."
+					description="Lista på lagmedlemmar (t.ex. förnamn räcker)."
 					value={form?.data?.members ?? ''}
 				/>
 				{#if form?.errors?.members}
@@ -130,8 +131,9 @@
 					name="coefficient"
 					type="number"
 					label="Koefficient"
-					description="Poängmultiplikator (standard är 1)."
+					description="Multiplikationsfaktor (lämna som 1 om osäker)."
 					step="0.01"
+					inputmode="decimal"
 					value={form?.data?.coefficient ?? 1}
 				/>
 				{#if form?.errors?.coefficient}

diff --git a/src/routes/api/feats/+server.ts b/src/routes/api/feats/+server.ts
@@ -2,6 +2,7 @@
 import { error, json } from '@sveltejs/kit';
 import type { RequestHandler } from '@sveltejs/kit';
 import type { Feat } from '$lib/stores';
+import { POCKETBASE_URL_INTERNAL, POCKETBASE_URL_PUBLIC } from '$lib/pocketbase';
 
 export const GET: RequestHandler = async function ({ locals, url }) {
 	const feats = await locals.client
@@ -16,7 +17,9 @@ export const GET: RequestHandler = async function ({ locals, url }) {
 		});
 	const featsWithProofUrls = feats.map((f: any) => ({
 		...f,
-		proofUrls: f.proofs.map((p: string) => locals.client.files.getURL(f, p))
+		proofUrls: f.proofs.map((p: string) =>
+			locals.client.files.getURL(f, p).replace(POCKETBASE_URL_INTERNAL, POCKETBASE_URL_PUBLIC)
+		)
 	})) as Feat[];
 	return json(featsWithProofUrls);
 };
diff --git a/src/routes/layout.css b/src/routes/layout.css
@@ -14,6 +14,10 @@
 }
 
 @layer base {
+	* {
+		-webkit-tap-highlight-color: transparent;
+	}
+
 	body {
 		@apply bg-stone-100 text-stone-900;
 	}
@@ -29,6 +33,14 @@
 }
 
 /* Custom utilities for reusable components */
+@utility pt-safe {
+	padding-top: env(safe-area-inset-top);
+}
+
+@utility pb-safe {
+	padding-bottom: env(safe-area-inset-bottom);
+}
+
 @utility btn {
 	@apply inline-flex items-center justify-center border-4 border-stone-900 px-6 py-3 font-mono font-bold tracking-wider uppercase shadow-[4px_4px_0px_0px_rgba(28,25,23,1)] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-[0px_0px_0px_0px_rgba(28,25,23,1)] focus:ring-4 focus:ring-brand-500 focus:outline-none active:translate-x-1 active:translate-y-1 active:shadow-none disabled:cursor-not-allowed disabled:opacity-50;
 }
@@ -46,7 +58,18 @@
 }
 
 @utility input-field {
-	@apply block w-full border-4 border-stone-900 bg-white px-4 py-3 font-mono text-base font-bold text-stone-900 shadow-[4px_4px_0px_0px_rgba(28,25,23,1)] transition-all focus:translate-x-1 focus:translate-y-1 focus:border-brand-600 focus:shadow-[0px_0px_0px_0px_rgba(28,25,23,1)] focus:outline-none disabled:bg-stone-200 disabled:text-stone-500 sm:text-lg;
+	@apply block w-full appearance-none border-4 border-stone-900 bg-white px-4 py-3 font-mono text-base font-bold text-stone-900 shadow-[4px_4px_0px_0px_rgba(28,25,23,1)] transition-all focus:translate-x-1 focus:translate-y-1 focus:border-brand-600 focus:shadow-[0px_0px_0px_0px_rgba(28,25,23,1)] focus:outline-none disabled:bg-stone-200 disabled:text-stone-500 sm:text-lg;
+	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%231c1917' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+	background-position: right 0.75rem center;
+	background-repeat: no-repeat;
+	background-size: 1.5em 1.5em;
+	padding-right: 2.5rem;
+}
+
+/* Override background for non-select inputs */
+input.input-field {
+	background-image: none;
+	padding-right: 1rem;
 }
 
 @utility card {