From 0f68e0d2e8577668b59aa7a7db15791a19c1035f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 16 Dec 2025 21:18:35 -0800
Subject: [PATCH] tweak import page input layout

---
 .../database/characters/import/+page.svelte   | 35 +++++++++++--------
 .../database/summons/import/+page.svelte      | 33 ++++++++++-------
 .../database/weapons/import/+page.svelte      | 35 +++++++++++--------
 3 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/src/routes/(app)/database/characters/import/+page.svelte b/src/routes/(app)/database/characters/import/+page.svelte
index 83625b0e..59d4f691 100644
--- a/src/routes/(app)/database/characters/import/+page.svelte
+++ b/src/routes/(app)/database/characters/import/+page.svelte
@@ -381,7 +381,19 @@
 	<!-- Input phase -->
 	{#if entities.size === 0}
 		<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
-			<p class="hint">Enter up to 10 wiki page names to import data</p>
+			<div class="input-header">
+				<p class="hint">Enter up to 10 wiki page names to import data</p>
+				<Button
+					variant="ghost"
+					class="add-input-button"
+					leftIcon="plus"
+					size="small"
+					type="button"
+					onclick={addInput}
+				>
+					Add another
+				</Button>
+			</div>
 			<div class="wiki-inputs">
 				{#each wikiPagesInputs as _, index}
 					<div class="input-row">
@@ -403,16 +415,6 @@
 						{/if}
 					</div>
 				{/each}
-				<Button
-					variant="ghost"
-					class="add-input-button"
-					leftIcon="plus"
-					size="small"
-					type="button"
-					onclick={addInput}
-				>
-					Add another
-				</Button>
 			</div>
 			{#if fetchError}
 				<p class="error">{fetchError}</p>
@@ -659,6 +661,13 @@
 		padding: spacing.$unit-2x;
 	}
 
+	.input-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: spacing.$unit-2x;
+	}
+
 	.wiki-inputs {
 		display: flex;
 		flex-direction: column;
@@ -671,10 +680,6 @@
 		align-items: center;
 	}
 
-	:global(.wiki-inputs .add-input-button) {
-		width: fit-content;
-	}
-
 	.remove-button {
 		display: flex;
 		align-items: center;
diff --git a/src/routes/(app)/database/summons/import/+page.svelte b/src/routes/(app)/database/summons/import/+page.svelte
index 6c3625f5..bf4e988e 100644
--- a/src/routes/(app)/database/summons/import/+page.svelte
+++ b/src/routes/(app)/database/summons/import/+page.svelte
@@ -365,7 +365,19 @@
 	<!-- Input phase -->
 	{#if entities.size === 0}
 		<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
-			<p class="hint">Enter up to 10 wiki page names to import data</p>
+			<div class="input-header">
+				<p class="hint">Enter up to 10 wiki page names to import data</p>
+				<Button
+					variant="ghost"
+					type="button"
+					onclick={addInput}
+					class="add-input-button"
+					leftIcon="plus"
+					size="small"
+				>
+					Add another
+				</Button>
+			</div>
 			<div class="wiki-inputs">
 				{#each wikiPagesInputs as _, index}
 					<div class="input-row">
@@ -382,14 +394,6 @@
 						{/if}
 					</div>
 				{/each}
-				<Button
-					variant="ghost"
-					type="button"
-					onclick={addInput}
-					class="add-input-button"
-					leftIcon="plus"
-					size="small">Add another</Button
-				>
 			</div>
 			{#if fetchError}
 				<p class="error">{fetchError}</p>
@@ -633,6 +637,13 @@
 		padding: spacing.$unit-2x;
 	}
 
+	.input-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: spacing.$unit-2x;
+	}
+
 	.wiki-inputs {
 		display: flex;
 		flex-direction: column;
@@ -645,10 +656,6 @@
 		align-items: center;
 	}
 
-	:global(.wiki-inputs .add-input-button) {
-		width: fit-content;
-	}
-
 	.remove-button {
 		display: flex;
 		align-items: center;
diff --git a/src/routes/(app)/database/weapons/import/+page.svelte b/src/routes/(app)/database/weapons/import/+page.svelte
index b2a0f870..374e9320 100644
--- a/src/routes/(app)/database/weapons/import/+page.svelte
+++ b/src/routes/(app)/database/weapons/import/+page.svelte
@@ -370,7 +370,19 @@
 	<!-- Input phase -->
 	{#if entities.size === 0}
 		<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
-			<p class="hint">Enter up to 10 wiki page names to import data</p>
+			<div class="input-header">
+				<p class="hint">Enter up to 10 wiki page names to import data</p>
+				<Button
+					variant="ghost"
+					class="add-input-button"
+					leftIcon="plus"
+					size="small"
+					type="button"
+					onclick={addInput}
+				>
+					Add another
+				</Button>
+			</div>
 			<div class="wiki-inputs">
 				{#each wikiPagesInputs as _, index}
 					<div class="input-row">
@@ -387,16 +399,6 @@
 						{/if}
 					</div>
 				{/each}
-				<Button
-					variant="ghost"
-					class="add-input-button"
-					leftIcon="plus"
-					size="small"
-					type="button"
-					onclick={addInput}
-				>
-					Add another
-				</Button>
 			</div>
 			{#if fetchError}
 				<p class="error">{fetchError}</p>
@@ -642,6 +644,13 @@
 		padding: spacing.$unit-2x;
 	}
 
+	.input-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: spacing.$unit-2x;
+	}
+
 	.wiki-inputs {
 		display: flex;
 		flex-direction: column;
@@ -654,10 +663,6 @@
 		align-items: center;
 	}
 
-	:global(.wiki-inputs .add-input-button) {
-		width: fit-content;
-	}
-
 	.remove-button {
 		display: flex;
 		align-items: center;