From 298bf7e857b841c937213f4d8d714f5a1979e290 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 15 Apr 2026 15:45:41 +0200
Subject: [PATCH] fix(auth-ui): narrow login/register form and drop stuck skip
 link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two visible issues on /login and /register in the Mana web app:

- The "Zum Anmeldeformular springen" skip link was visible in the
  top-left corner instead of only on keyboard focus. It's an a11y
  nicety that in practice clutters the page for every user. Remove
  the button (and the dead skipToForm() handler in LoginPage) rather
  than try to fix an sr-only variant that apparently doesn't survive
  the Tailwind v4 @source pipeline here.
- The form card rendered ~full-width on desktop even though the
  existing max-w-[440px] / max-w-[480px] arbitrary-value classes
  should have constrained it. Replace those with style:max-width
  inline so the 440px cap is guaranteed regardless of how Tailwind
  picks up classes from the shared-auth-ui package.

Same changes applied to RegisterPage (only width — no skip link
there) so the two pages stay visually identical.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../shared-auth-ui/src/pages/LoginPage.svelte   | 17 +++--------------
 .../src/pages/RegisterPage.svelte               |  5 +++--
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/shared-auth-ui/src/pages/LoginPage.svelte b/packages/shared-auth-ui/src/pages/LoginPage.svelte
index 9d25eb47e..180a45d2b 100644
--- a/packages/shared-auth-ui/src/pages/LoginPage.svelte
+++ b/packages/shared-auth-ui/src/pages/LoginPage.svelte
@@ -465,10 +465,6 @@
 			setError(result.error || t.signInFailed, 'general');
 		}
 	}
-
-	function skipToForm() {
-		if (emailInput) emailInput.focus();
-	}
 </script>
 
 <svelte:head>
@@ -477,14 +473,6 @@
 	<meta name="theme-color" content={lightBackground} media="(prefers-color-scheme: light)" />
 </svelte:head>
 
-<button
-	class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:bg-black focus:text-white focus:px-4 focus:py-2 focus:rounded-md focus:z-[100] focus:font-medium focus:outline focus:outline-2 focus:outline-white"
-	onclick={skipToForm}
-	type="button"
->
-	{t.skipToForm}
-</button>
-
 <div class="sr-only" aria-live="polite" aria-atomic="true">
 	{successAnnouncement}
 </div>
@@ -520,7 +508,7 @@
 	{/if}
 
 	<main class="flex-1 flex flex-col items-center justify-center">
-		<div class="w-full max-w-[480px] mx-auto px-4 flex flex-col items-center">
+		<div class="w-full mx-auto px-4 flex flex-col items-center" style:max-width="440px">
 			<!-- Logo Section -->
 			<div class="flex flex-col items-center pt-8 max-[480px]:pt-6 pb-4 anim-fade-in-scale">
 				<div
@@ -543,7 +531,8 @@
 			<!-- Form Section -->
 			<div class="w-full flex justify-center pt-2 pb-8">
 				<div
-					class="w-full max-w-[440px] rounded-2xl p-6 max-[480px]:p-5 border backdrop-blur-[10px] anim-fade-in-up"
+					class="w-full rounded-2xl p-6 border backdrop-blur-[10px] anim-fade-in-up"
+					style:max-width="440px"
 					class:shake={shakeError}
 					style:background-color={isDark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)'}
 					style:border-color={isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'}
diff --git a/packages/shared-auth-ui/src/pages/RegisterPage.svelte b/packages/shared-auth-ui/src/pages/RegisterPage.svelte
index b068bd9ae..082e65bae 100644
--- a/packages/shared-auth-ui/src/pages/RegisterPage.svelte
+++ b/packages/shared-auth-ui/src/pages/RegisterPage.svelte
@@ -287,7 +287,7 @@
 	{/if}
 
 	<main class="flex-1 flex flex-col items-center justify-center">
-		<div class="w-full max-w-[480px] mx-auto px-4 flex flex-col items-center">
+		<div class="w-full mx-auto px-4 flex flex-col items-center" style:max-width="440px">
 			<!-- Logo Section -->
 			<div class="flex flex-col items-center pt-8 max-[480px]:pt-6 pb-4 anim-fade-in-scale">
 				<div
@@ -303,7 +303,8 @@
 			<!-- Form Section -->
 			<div class="w-full flex justify-center pt-2 pb-8">
 				<div
-					class="w-full max-w-[440px] rounded-2xl p-6 max-[480px]:p-5 border backdrop-blur-[10px] anim-fade-in-up"
+					class="w-full rounded-2xl p-6 border backdrop-blur-[10px] anim-fade-in-up"
+					style:max-width="440px"
 					style:background-color={isDark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)'}
 					style:border-color={isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'}
 				>