From 65256a9244327870cd036629cb9b8925be8baef7 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sun, 15 Feb 2026 05:56:15 +1300
Subject: [PATCH] Improved setup page

---
 .../src/lib/components/Question.svelte        | 16 +++++---
 .../src/routes/(app)/setup/+page.svelte       | 39 ++++++++++---------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/materialious/src/lib/components/Question.svelte b/materialious/src/lib/components/Question.svelte
index 7f37dde4..99fcf63b 100644
--- a/materialious/src/lib/components/Question.svelte
+++ b/materialious/src/lib/components/Question.svelte
@@ -27,19 +27,25 @@
 <div class="grid">
 	{#each answers as answer (answer)}
 		<div class={`s12 m${coloumSize} l${coloumSize}`}>
-			<article
-				style="cursor: pointer;"
-				role="presentation"
-				tabindex="-1"
+			<button
 				onclick={() => selectAnswer(answer)}
 				class:primary={selectedAnswer === answer.text}
 				class:surface-container-highest={selectedAnswer !== answer.text}
 			>
 				<h6>{answer.text}</h6>
-			</article>
+			</button>
 		</div>
 	{/each}
 </div>
+
 {#if info}
 	<p><i>info</i> {info}</p>
 {/if}
+
+<style>
+	button {
+		width: 100%;
+		box-sizing: border-box;
+		height: 4rem;
+	}
+</style>
diff --git a/materialious/src/routes/(app)/setup/+page.svelte b/materialious/src/routes/(app)/setup/+page.svelte
index 0d7384f8..e575c0a4 100644
--- a/materialious/src/routes/(app)/setup/+page.svelte
+++ b/materialious/src/routes/(app)/setup/+page.svelte
@@ -15,7 +15,9 @@
 	let invidiousInstanceValid: boolean = $state(true);
 	let invidiousInstance: string = $state(defaultInstance ?? '');
 
-	async function setupCompleted() {
+	async function setupCompleted(event?: Event) {
+		event?.preventDefault();
+
 		invidiousInstanceValid = await setInvidiousInstance(invidiousInstance);
 
 		if (!invidiousInstanceValid) {
@@ -110,29 +112,30 @@
 
 				<div class="space"></div>
 				<h3>{$_('initalSetup.configureInstance')}</h3>
-				<div
-					class="field label prefix surface-container-highest"
-					class:invalid={!invidiousInstanceValid && invidiousInstance !== ''}
-				>
-					<i>link</i>
-					<input bind:value={invidiousInstance} name="instanceUrl" type="text" tabindex="0" />
-					<label for="instanceUrl" tabindex="-1">{$_('layout.instanceUrl')}</label>
-					{#if !invidiousInstanceValid && invidiousInstance !== ''}
-						<span class="error">{$_('invalidInstance')}</span>
-					{/if}
-				</div>
+				<form onsubmit={setupCompleted}>
+					<nav class="center-align">
+						<div
+							class="field label prefix surface-container-highest"
+							class:invalid={!invidiousInstanceValid && invidiousInstance !== ''}
+						>
+							<i>link</i>
+							<input bind:value={invidiousInstance} name="instanceUrl" type="text" tabindex="0" />
+							<label for="instanceUrl" tabindex="-1">{$_('layout.instanceUrl')}</label>
+						</div>
 
-				<div class="space"></div>
-
-				<button onclick={setupCompleted}>
-					<i>done_all</i>
-					<span>{$_('initalSetup.done')}</span>
-				</button>
+						<button type="submit">
+							<i>done_all</i>
+							<span>{$_('initalSetup.done')}</span>
+						</button>
+					</nav>
+				</form>
 			{/if}
 		{/if}
 	</div>
 </nav>
 
+<div style="margin-bottom: 20rem;"></div>
+
 <style>
 	.setup {
 		width: 600px;