From 683927e4132651b9198e5421fae16e9c60978fbc Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Mon, 15 Sep 2025 20:29:55 -0700
Subject: flex

---
 src/lib/Copy.svelte     |  4 +--
 src/routes/+page.svelte | 79 ++++++++++++++++++++++++++++++++-----------------
 2 files changed, 54 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/lib/Copy.svelte b/src/lib/Copy.svelte
index 0d8518e..c218030 100644
--- a/src/lib/Copy.svelte
+++ b/src/lib/Copy.svelte
@@ -8,8 +8,8 @@
 	};
 </script>
 
-<div data-tip="Copied!" class:tooltip={justCopied}>
-	<button type="button" class="btn" onclick={copy}>
+<div data-tip="Copied!" class:tooltip={justCopied} class="grow !w-auto">
+	<button type="button" class="btn w-full" onclick={copy}>
 		<iconify-icon icon="ph:copy-bold" width={32} />
 	</button>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 12dd597..4694a63 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -232,53 +232,78 @@
 </script>
 
 <form class="space-y-5" onsubmit={checkBalance}>
-	<div class="flex items-center gap-2">
+	<div class="flex flex-wrap gap-2">
 		{#if revealSeed}
-			<textarea use:focus class="textarea grow" placeholder="Seed phrase" bind:value={mnemonic}
+			<textarea
+				use:focus
+				class="textarea w-full min-w-[200px] sm:w-auto"
+				placeholder="Seed phrase"
+				bind:value={mnemonic}
 			></textarea>
 		{:else}
-			<input type="password" class="input grow" placeholder="Seed phrase" bind:value={mnemonic} />
+			<input
+				type="password"
+				class="input w-full min-w-[200px] grow sm:w-auto"
+				placeholder="Seed phrase"
+				bind:value={mnemonic}
+			/>
 		{/if}
-		<button type="button" class="btn" onclick={toggleSeed}>
-			<iconify-icon icon={revealSeed ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} />
-		</button>
-		<Copy bind:text={mnemonic} />
-		<button type="button" class="btn" onclick={pasteSeed}>
-      <iconify-icon icon="ph:clipboard-text-bold" width={32} />
-		</button>
-		<button type="button" class="btn" onclick={generate}>
-			<iconify-icon icon="ph:dice-five-bold" width={32} />
-		</button>
+		<div class="flex flex-wrap w-full justify-center sm:w-auto">
+			<button type="button" class="btn !w-auto grow" onclick={toggleSeed}>
+				<iconify-icon icon={revealSeed ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} />
+			</button>
+			<Copy bind:text={mnemonic} />
+			<button type="button" class="btn !w-auto grow" onclick={pasteSeed}>
+				<iconify-icon icon="ph:clipboard-text-bold" width={32} />
+			</button>
+			<button type="button" class="btn !w-auto grow" onclick={generate}>
+				<iconify-icon icon="ph:dice-five-bold" width={32} />
+			</button>
+		</div>
 	</div>
 
-	<div class="flex">
+	<div class="flex flex-wrap gap-2">
 		{#if revealPassword}
-			<input class="input w-full" placeholder="Passphrase" bind:value={password} />
+			<input
+				class="input w-full min-w-[200px] sm:w-auto"
+				placeholder="Passphrase"
+				bind:value={password}
+			/>
 		{:else}
-			<input type="password" class="input w-full" placeholder="Passphrase" bind:value={password} />
+			<input
+				type="password"
+				class="input w-full min-w-[200px] sm:w-auto"
+				placeholder="Passphrase"
+				bind:value={password}
+			/>
 		{/if}
 
-		<button type="button" class="btn" onclick={togglePassword}>
-			<iconify-icon icon={revealPassword ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} />
-		</button>
+		<div class="flex w-full justify-center sm:w-auto">
+			<button type="button" class="btn !w-auto grow" onclick={togglePassword}>
+				<iconify-icon icon={revealPassword ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} />
+			</button>
 
-		<Copy bind:text={password} />
+			<Copy bind:text={password} />
 
-		<button type="button" class="btn" onclick={pastePassword}>
-			<iconify-icon icon="ph:clipboard-text-bold" width={32} />
-		</button>
+			<button type="button" class="btn !w-auto grow" onclick={pastePassword}>
+				<iconify-icon icon="ph:clipboard-text-bold" width={32} />
+			</button>
+		</div>
 	</div>
 
 	<div>
 		{#if address}
-			<div class="flex items-center gap-2 break-all">
+			<div class="flex flex-wrap items-center gap-2 break-all text-base">
 				<div>
 					{address}
 				</div>
 
-        <Copy bind:text={address} />
-
-				<button type="submit" class="btn ml-auto"> Check balance </button>
+				<div class="flex w-full justify-center sm:w-auto">
+					<Copy bind:text={address} />
+					<button type="submit" class="btn !w-auto grow ml-auto">
+						<iconify-icon icon="ph:coins-bold" width={32} />
+					</button>
+				</div>
 			</div>
 		{/if}
 	</div>
-- 
cgit v1.2.3