From 04fcf1110e97b42dc5f0c20e169c569075d1e797 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Tue, 3 Jun 2025 21:09:32 +0200
Subject: [PATCH] fix: improve spacing on auth screens

---
 .../src/lib/components/login-wrapper.svelte   | 116 +++++++++---------
 frontend/src/routes/authorize/+page.svelte    |  24 ++--
 frontend/src/routes/device/+page.svelte       |  10 +-
 3 files changed, 75 insertions(+), 75 deletions(-)

diff --git a/frontend/src/lib/components/login-wrapper.svelte b/frontend/src/lib/components/login-wrapper.svelte
index c6ff8402..3d5b91b9 100644
--- a/frontend/src/lib/components/login-wrapper.svelte
+++ b/frontend/src/lib/components/login-wrapper.svelte
@@ -3,6 +3,7 @@
 	import { m } from '$lib/paraglide/messages';
 	import { cn } from '$lib/utils/style';
 	import type { Snippet } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
 	import * as Card from './ui/card';
 
 	let {
@@ -14,72 +15,75 @@
 		showAlternativeSignInMethodButton?: boolean;
 		animate?: boolean;
 	} = $props();
+
+	const isDesktop = new MediaQuery('min-width: 1024px');
 </script>
 
-<!-- Desktop with sliding reveal animation -->
-<div class="hidden h-screen items-center overflow-hidden text-center lg:flex">
-	<!-- Content area that fades in after background slides -->
-	<div
-		class="relative z-10 flex h-full w-[650px] p-16 {cn(
-			showAlternativeSignInMethodButton && 'pb-0',
-			animate && 'animate-delayed-fade'
-		)}"
-	>
-		<div class="flex h-full w-full flex-col overflow-hidden">
-			<div class="relative flex flex-grow flex-col items-center justify-center overflow-auto">
-				{@render children()}
+{#if isDesktop.current}
+	<div class="h-screen items-center overflow-hidden text-center">
+		<div
+			class="relative z-10 flex h-full w-[650px] p-16 {cn(
+				showAlternativeSignInMethodButton && 'pb-0',
+				animate && 'animate-delayed-fade'
+			)}"
+		>
+			<div class="flex h-full w-full flex-col overflow-hidden">
+				<div class="relative flex flex-grow flex-col items-center justify-center overflow-auto">
+					{@render children()}
+				</div>
+				{#if showAlternativeSignInMethodButton}
+					<div
+						class="mb-4 flex items-center justify-center"
+						style={animate ? 'animation-delay: 1000ms;' : ''}
+					>
+						<a
+							href={page.url.pathname == '/login'
+								? '/login/alternative'
+								: `/login/alternative?redirect=${encodeURIComponent(
+										page.url.pathname + page.url.search
+									)}`}
+							class="text-muted-foreground text-xs transition-colors hover:underline"
+						>
+							{m.dont_have_access_to_your_passkey()}
+						</a>
+					</div>
+				{/if}
 			</div>
-			{#if showAlternativeSignInMethodButton}
-				<div
-					class="mb-4 flex items-center justify-center"
-					style={animate ? 'animation-delay: 1000ms;' : ''}
-				>
+		</div>
+
+		<!-- Background image with slide animation -->
+		<div class="{cn(animate && 'animate-slide-bg-container')} absolute top-0 right-0 bottom-0 z-0">
+			<img
+				src="/api/application-configuration/background-image"
+				class="h-screen rounded-l-[60px] object-cover {animate
+					? 'w-full'
+					: 'w-[calc(100vw-650px)]'}"
+				alt={m.login_background()}
+			/>
+		</div>
+	</div>
+{:else}
+	<div
+		class="flex h-screen items-center justify-center bg-[url('/api/application-configuration/background-image')] bg-cover bg-center text-center"
+	>
+		<Card.Root class="mx-3 w-full max-w-md" style={animate ? 'animation-delay: 200ms;' : ''}>
+			<Card.CardContent
+				class="px-4 py-10 sm:p-10 {showAlternativeSignInMethodButton ? 'pb-3 sm:pb-3' : ''}"
+			>
+				{@render children()}
+				{#if showAlternativeSignInMethodButton}
 					<a
 						href={page.url.pathname == '/login'
 							? '/login/alternative'
 							: `/login/alternative?redirect=${encodeURIComponent(
 									page.url.pathname + page.url.search
 								)}`}
-						class="text-muted-foreground text-xs transition-colors hover:underline"
+						class="text-muted-foreground mt-7 flex justify-center text-xs transition-colors hover:underline"
 					>
 						{m.dont_have_access_to_your_passkey()}
 					</a>
-				</div>
-			{/if}
-		</div>
+				{/if}
+			</Card.CardContent>
+		</Card.Root>
 	</div>
-
-	<!-- Background image with slide animation -->
-	<div class="{cn(animate && 'animate-slide-bg-container')} absolute top-0 right-0 bottom-0 z-0">
-		<img
-			src="/api/application-configuration/background-image"
-			class="h-screen rounded-l-[60px] object-cover {animate ? 'w-full' : 'w-[calc(100vw-650px)]'}"
-			alt={m.login_background()}
-		/>
-	</div>
-</div>
-
-<!-- Mobile -->
-<div
-	class="flex h-screen items-center justify-center bg-[url('/api/application-configuration/background-image')] bg-cover bg-center text-center lg:hidden"
->
-	<Card.Root class="mx-3 w-full max-w-md" style={animate ? 'animation-delay: 200ms;' : ''}>
-		<Card.CardContent
-			class="px-4 py-10 sm:p-10 {showAlternativeSignInMethodButton ? 'pb-3 sm:pb-3' : ''}"
-		>
-			{@render children()}
-			{#if showAlternativeSignInMethodButton}
-				<a
-					href={page.url.pathname == '/login'
-						? '/login/alternative'
-						: `/login/alternative?redirect=${encodeURIComponent(
-								page.url.pathname + page.url.search
-							)}`}
-					class="text-muted-foreground mt-7 flex justify-center text-xs transition-colors hover:underline"
-				>
-					{m.dont_have_access_to_your_passkey()}
-				</a>
-			{/if}
-		</Card.CardContent>
-	</Card.Root>
-</div>
+{/if}
diff --git a/frontend/src/routes/authorize/+page.svelte b/frontend/src/routes/authorize/+page.svelte
index 548a6c55..fb5fe5f3 100644
--- a/frontend/src/routes/authorize/+page.svelte
+++ b/frontend/src/routes/authorize/+page.svelte
@@ -103,9 +103,9 @@
 				})}
 			</p>
 		{:else if authorizationRequired}
-			<div transition:slide={{ duration: 300 }}>
+			<div class="w-full max-w-[450px]" transition:slide={{ duration: 300 }}>
 				<Card.Root class="mt-6 mb-10">
-					<Card.Header class="pb-5">
+					<Card.Header>
 						<p class="text-muted-foreground text-start">
 							{@html m.client_wants_to_access_the_following_information({ client: client.name })}
 						</p>
@@ -138,18 +138,14 @@
 				</Card.Root>
 			</div>
 		{/if}
-		<!-- Wrap the buttons in a container with the same width as in the login code page -->
-		<div class="w-full max-w-[450px]">
-			<div class="mt-8 flex justify-between gap-2">
-				<Button onclick={() => history.back()} class="flex-1" variant="secondary"
-					>{m.cancel()}</Button
-				>
-				{#if !errorMessage}
-					<Button class="flex-1" {isLoading} onclick={authorize}>{m.sign_in()}</Button>
-				{:else}
-					<Button class="flex-1" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
-				{/if}
-			</div>
+		<div class="flex w-full max-w-[450px] gap-2">
+			<Button onclick={() => history.back()} class="flex-1" variant="secondary">{m.cancel()}</Button
+			>
+			{#if !errorMessage}
+				<Button class="flex-1" {isLoading} onclick={authorize}>{m.sign_in()}</Button>
+			{:else}
+				<Button class="flex-1" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
+			{/if}
 		</div>
 	</SignInWrapper>
 {/if}
diff --git a/frontend/src/routes/device/+page.svelte b/frontend/src/routes/device/+page.svelte
index 5b907354..cc5dccd0 100644
--- a/frontend/src/routes/device/+page.svelte
+++ b/frontend/src/routes/device/+page.svelte
@@ -89,7 +89,7 @@
 	{:else if success}
 		<p class="text-muted-foreground mt-2">{m.the_device_has_been_authorized()}</p>
 	{:else if authorizationRequired}
-		<div transition:slide={{ duration: 300 }}>
+		<div class="w-full max-w-[450px]" transition:slide={{ duration: 300 }}>
 			<Card.Root class="mt-6">
 				<Card.Header class="pb-5">
 					<p class="text-muted-foreground text-start">
@@ -110,14 +110,14 @@
 		</form>
 	{/if}
 	{#if !success}
-		<div class="mt-10 flex w-full justify-stretch gap-2">
-			<Button href="/" class="w-full" variant="secondary">{m.cancel()}</Button>
+		<div class="mt-10 flex w-full max-w-[450px] gap-2">
+			<Button href="/" class="flex-1" variant="secondary">{m.cancel()}</Button>
 			{#if !errorMessage}
-				<Button form="device-code-form" class="w-full" onclick={authorize} {isLoading}
+				<Button form="device-code-form" class="flex-1" onclick={authorize} {isLoading}
 					>{m.authorize()}</Button
 				>
 			{:else}
-				<Button class="w-full" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
+				<Button class="flex-1" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
 			{/if}
 		</div>
 	{/if}