From 975d3c79c6a882291c69b31d25bfcd8b7896528c Mon Sep 17 00:00:00 2001
From: Kyle Mendell <ksm@ofkm.us>
Date: Tue, 21 Apr 2026 11:55:43 -0500
Subject: [PATCH] fix: restore login screen background from not showing up

---
 frontend/package.json                         | 124 +++++++++---------
 .../src/lib/components/login-wrapper.svelte   |  11 +-
 frontend/src/routes/authorize/+page.svelte    |  14 +-
 .../application-configuration/+page.svelte    |   8 +-
 .../oidc-callback-url-input.svelte            |   2 +-
 .../settings/admin/users/[id]/+page.svelte    |   6 +-
 frontend/vite.config.ts                       |   4 +-
 7 files changed, 93 insertions(+), 76 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 86333f2b..0357e283 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,64 +1,64 @@
 {
-  "name": "pocket-id-frontend",
-  "version": "2.6.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "dev": "vite dev --port 3000",
-    "build": "vite build",
-    "preview": "vite preview --port 3000",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "dependencies": {
-    "@simplewebauthn/browser": "^13.3.0",
-    "@tailwindcss/vite": "^4.2.2",
-    "axios": "^1.15.0",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "jose": "^6.2.2",
-    "qrcode": "^1.5.4",
-    "runed": "^0.37.1",
-    "sveltekit-superforms": "^2.30.1",
-    "tailwind-merge": "^3.5.0",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@inlang/paraglide-js": "^2.15.3",
-    "@inlang/plugin-m-function-matcher": "^2.2.4",
-    "@inlang/plugin-message-format": "^4.4.0",
-    "@internationalized/date": "^3.12.0",
-    "@lucide/svelte": "^0.559.0",
-    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.57.1",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@types/eslint": "^9.6.1",
-    "@types/node": "^24.12.2",
-    "@types/qrcode": "^1.5.6",
-    "bits-ui": "^2.17.3",
-    "eslint": "^9.39.4",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.17.0",
-    "formsnap": "^2.0.1",
-    "globals": "^16.5.0",
-    "mode-watcher": "^1.1.0",
-    "prettier": "^3.8.2",
-    "prettier-plugin-svelte": "^3.5.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "rollup": "^4.60.1",
-    "svelte": "^5.55.3",
-    "svelte-check": "^4.4.6",
-    "svelte-sonner": "^1.1.0",
-    "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.2.2",
-    "tslib": "^2.8.1",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.58.1",
-    "vite": "^7.3.2",
-    "vite-plugin-compression": "^0.5.1"
-  }
+	"name": "pocket-id-frontend",
+	"version": "2.6.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"preinstall": "npx only-allow pnpm",
+		"dev": "vite dev --port 3000",
+		"build": "vite build",
+		"preview": "vite preview --port 3000",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@simplewebauthn/browser": "^13.3.0",
+		"@tailwindcss/vite": "^4.2.2",
+		"axios": "^1.15.0",
+		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"jose": "^6.2.2",
+		"qrcode": "^1.5.4",
+		"runed": "^0.37.1",
+		"sveltekit-superforms": "^2.30.1",
+		"tailwind-merge": "^3.5.0",
+		"zod": "^4.3.6"
+	},
+	"devDependencies": {
+		"@inlang/paraglide-js": "^2.15.3",
+		"@inlang/plugin-m-function-matcher": "^2.2.4",
+		"@inlang/plugin-message-format": "^4.4.0",
+		"@internationalized/date": "^3.12.0",
+		"@lucide/svelte": "^0.559.0",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.57.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@types/eslint": "^9.6.1",
+		"@types/node": "^24.12.2",
+		"@types/qrcode": "^1.5.6",
+		"bits-ui": "^2.17.3",
+		"eslint": "^9.39.4",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.17.0",
+		"formsnap": "^2.0.1",
+		"globals": "^16.5.0",
+		"mode-watcher": "^1.1.0",
+		"prettier": "^3.8.2",
+		"prettier-plugin-svelte": "^3.5.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"rollup": "^4.60.1",
+		"svelte": "^5.55.3",
+		"svelte-check": "^4.4.6",
+		"svelte-sonner": "^1.1.0",
+		"tailwind-variants": "^3.2.2",
+		"tailwindcss": "^4.2.2",
+		"tslib": "^2.8.1",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.58.1",
+		"vite": "^7.3.2",
+		"vite-plugin-compression": "^0.5.1"
+	}
 }
diff --git a/frontend/src/lib/components/login-wrapper.svelte b/frontend/src/lib/components/login-wrapper.svelte
index 425048db..d8a4eaf9 100644
--- a/frontend/src/lib/components/login-wrapper.svelte
+++ b/frontend/src/lib/components/login-wrapper.svelte
@@ -37,7 +37,7 @@
 		isInitialLoad = !e?.from?.url;
 	});
 
-	const isDesktop = new MediaQuery('min-width: 1024px');
+	const isDesktop = new MediaQuery('(min-width: 1024px)');
 	let alternativeSignInButton = $state({
 		href: '/login/alternative',
 		label: m.alternative_sign_in_methods()
@@ -61,7 +61,12 @@
 {#if backgroundImageExists === undefined}
 	<div class="bg-background h-screen"></div>
 {:else if isDesktop.current}
-	<div in:fade={{ duration: 150 }} class="h-screen items-center overflow-hidden text-center">
+	<div
+		in:fade={{ duration: 150 }}
+		class="relative flex h-screen w-full items-center overflow-hidden text-center {backgroundImageExists
+			? 'justify-start'
+			: 'justify-center'}"
+	>
 		<div
 			class="relative z-10 flex h-full p-16 {cn(
 				showAlternativeSignInMethodButton && 'pb-0',
@@ -88,7 +93,7 @@
 		{#if backgroundImageExists}
 			<!-- Background image -->
 			<div
-				class="absolute top-0 right-0 left-500px bottom-0 z-0 overflow-hidden rounded-[40px] m-6"
+				class="absolute top-0 right-0 bottom-0 left-[650px] z-0 m-6 overflow-hidden rounded-[40px] 2xl:left-[800px]"
 			>
 				<img
 					src={cachedBackgroundImage.getUrl()}
diff --git a/frontend/src/routes/authorize/+page.svelte b/frontend/src/routes/authorize/+page.svelte
index 4ed5137c..e9a99ba2 100644
--- a/frontend/src/routes/authorize/+page.svelte
+++ b/frontend/src/routes/authorize/+page.svelte
@@ -20,8 +20,16 @@
 	const oidService = new OidcService();
 
 	let { data }: PageProps = $props();
-	let { client, scope, callbackURL, nonce, codeChallenge, codeChallengeMethod, authorizeState, prompt } =
-		data;
+	let {
+		client,
+		scope,
+		callbackURL,
+		nonce,
+		codeChallenge,
+		codeChallengeMethod,
+		authorizeState,
+		prompt
+	} = data;
 
 	let isLoading = $state(false);
 	let success = $state(false);
@@ -71,7 +79,7 @@
 
 			if (!authorizationConfirmed) {
 				authorizationRequired = await oidService.isAuthorizationRequired(client!.id, scope);
-				
+
 				// If prompt=consent, always show consent UI
 				if (hasPromptConsent) {
 					authorizationRequired = true;
diff --git a/frontend/src/routes/settings/admin/application-configuration/+page.svelte b/frontend/src/routes/settings/admin/application-configuration/+page.svelte
index c4c592ba..e8a9df12 100644
--- a/frontend/src/routes/settings/admin/application-configuration/+page.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/+page.svelte
@@ -70,10 +70,10 @@
 
 		const backgroundImagePromise =
 			backgroundImage === null
-			? appConfigService.deleteBackgroundImage()
-			: backgroundImage
-				? appConfigService.updateBackgroundImage(backgroundImage)
-				: Promise.resolve();
+				? appConfigService.deleteBackgroundImage()
+				: backgroundImage
+					? appConfigService.updateBackgroundImage(backgroundImage)
+					: Promise.resolve();
 
 		await Promise.all([
 			lightLogoPromise,
diff --git a/frontend/src/routes/settings/admin/oidc-clients/oidc-callback-url-input.svelte b/frontend/src/routes/settings/admin/oidc-clients/oidc-callback-url-input.svelte
index 8587f943..809430a2 100644
--- a/frontend/src/routes/settings/admin/oidc-clients/oidc-callback-url-input.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/oidc-callback-url-input.svelte
@@ -33,7 +33,7 @@
 						data-testid={`callback-url-${i + 1}`}
 						type="text"
 						inputmode="url"
-  						autocomplete="url"
+						autocomplete="url"
 						bind:value={callbackURLs[i]}
 					/>
 					<Button
diff --git a/frontend/src/routes/settings/admin/users/[id]/+page.svelte b/frontend/src/routes/settings/admin/users/[id]/+page.svelte
index 551dd995..857e6696 100644
--- a/frontend/src/routes/settings/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/settings/admin/users/[id]/+page.svelte
@@ -139,7 +139,11 @@
 		</Item.Media>
 		<Item.Content class="min-w-52">
 			<Item.Title class="text-xl font-semibold">{m.passkeys()}</Item.Title>
-			<Item.Description>{passkeys.length > 0 ? m.manage_this_users_passkeys() : m.user_has_no_passkeys_yet()}</Item.Description>
+			<Item.Description
+				>{passkeys.length > 0
+					? m.manage_this_users_passkeys()
+					: m.user_has_no_passkeys_yet()}</Item.Description
+			>
 		</Item.Content>
 	</Item.Root>
 	{#if passkeys.length > 0}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 7c0f0dee..770dec59 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -21,7 +21,7 @@ export default defineConfig((mode) => {
 				disable: mode.isPreview,
 				algorithm: 'gzip',
 				ext: '.gz',
-				filter:  /\.(js|mjs|json|css)$/i
+				filter: /\.(js|mjs|json|css)$/i
 			}),
 
 			// Create brotli-compressed files
@@ -29,7 +29,7 @@ export default defineConfig((mode) => {
 				disable: mode.isPreview,
 				algorithm: 'brotliCompress',
 				ext: '.br',
-				filter:  /\.(js|mjs|json|css)$/i
+				filter: /\.(js|mjs|json|css)$/i
 			})
 		],