feat: new login code card position for mobile devices (#452)

Co-authored-by: Kyle Mendell <kmendell@ofkm.us>

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">