From 02cacba5c5524481684cb0e1790811df113a9481 Mon Sep 17 00:00:00 2001
From: James18232 <jjccargill@gmail.com>
Date: Mon, 28 Apr 2025 14:04:48 +1000
Subject: [PATCH] feat: new login code card position for mobile devices (#452)

Co-authored-by: Kyle Mendell <kmendell@ofkm.us>
---
 .../src/routes/settings/account/+page.svelte  | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/settings/account/+page.svelte b/frontend/src/routes/settings/account/+page.svelte
index 3c44ee89..2c47a876 100644
--- a/frontend/src/routes/settings/account/+page.svelte
+++ b/frontend/src/routes/settings/account/+page.svelte
@@ -93,6 +93,30 @@
 	</Alert.Root>
 {/if}
 
+
+<!-- Login code card mobile -->
+<div class="block sm:hidden">
+	<Card.Root>
+		<Card.Header>
+			<div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
+				<div>
+					<Card.Title>
+						<RectangleEllipsis class="text-primary/80 h-5 w-5" />
+						{m.login_code()}
+					</Card.Title>
+					<Card.Description>
+						{m.create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey()}
+					</Card.Description>
+				</div>
+
+				<Button variant="outline" class="w-full" on:click={() => (showLoginCodeModal = true)}>
+					{m.create()}
+				</Button>
+			</div>
+		</Card.Header>
+	</Card.Root>
+</div>
+
 <!-- Account details card -->
 <fieldset
 	disabled={!$appConfigStore.allowOwnAccountEdit ||
@@ -143,8 +167,9 @@
 	</Card.Root>
 </div>
 
+
 <!-- Login code card -->
-<div>
+<div class="hidden sm:block">
 	<Card.Root>
 		<Card.Header>
 			<div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">