From cad80e7d747cdb324d87fd303d1c67907b6f65c5 Mon Sep 17 00:00:00 2001
From: GameTec-live <benedikt.werner08@gmail.com>
Date: Sun, 8 Mar 2026 15:41:08 +0100
Subject: [PATCH] fix: move tooltip inside of form input to prevent shifting
 (#1369)

---
 .../settings/admin/users/user-form.svelte     | 60 ++++++++++---------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/frontend/src/routes/settings/admin/users/user-form.svelte b/frontend/src/routes/settings/admin/users/user-form.svelte
index 83d8a745..b68e7f97 100644
--- a/frontend/src/routes/settings/admin/users/user-form.svelte
+++ b/frontend/src/routes/settings/admin/users/user-form.svelte
@@ -2,6 +2,7 @@
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
 	import { Toggle } from '$lib/components/ui/toggle';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 	import { m } from '$lib/paraglide/messages';
@@ -76,34 +77,37 @@
 	<fieldset disabled={inputDisabled}>
 		<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
 			<FormInput label={m.username()} bind:input={$inputs.username} />
-			<div class="flex items-end">
-				<FormInput
-					inputClass="rounded-r-none border-r-0"
-					label={m.email()}
-					bind:input={$inputs.email}
-				/>
-				<Tooltip.Provider>
-					{@const label = $inputs.emailVerified.value
-						? m.mark_as_unverified()
-						: m.mark_as_verified()}
-					<Tooltip.Root>
-						<Tooltip.Trigger>
-							<Toggle
-								bind:pressed={$inputs.emailVerified.value}
-								aria-label={label}
-								class="h-9 border-input bg-yellow-100 dark:bg-yellow-950 data-[state=on]:bg-green-100 dark:data-[state=on]:bg-green-950 rounded-l-none border px-2 py-1 shadow-xs flex items-center hover:data-[state=on]:bg-accent"
-							>
-								{#if $inputs.emailVerified.value}
-									<LucideMailCheck class="text-green-500 dark:text-green-600 size-5" />
-								{:else}
-									<LucideMailWarning class="text-yellow-500 dark:text-yellow-600 size-5" />
-								{/if}
-							</Toggle>
-						</Tooltip.Trigger>
-						<Tooltip.Content>{label}</Tooltip.Content>
-					</Tooltip.Root>
-				</Tooltip.Provider>
-			</div>
+			<FormInput label={m.email()} bind:input={$inputs.email} labelFor="email">
+				<div class="flex items-end">
+					<Input
+						id="email"
+						class="rounded-r-none border-r-0"
+						aria-invalid={!!$inputs.email.error}
+						bind:value={$inputs.email.value}
+					/>
+					<Tooltip.Provider>
+						{@const label = $inputs.emailVerified.value
+							? m.mark_as_unverified()
+							: m.mark_as_verified()}
+						<Tooltip.Root>
+							<Tooltip.Trigger>
+								<Toggle
+									bind:pressed={$inputs.emailVerified.value}
+									aria-label={label}
+									class="h-9 border-input bg-yellow-100 dark:bg-yellow-950 data-[state=on]:bg-green-100 dark:data-[state=on]:bg-green-950 rounded-l-none border px-2 py-1 shadow-xs flex items-center hover:data-[state=on]:bg-accent"
+								>
+									{#if $inputs.emailVerified.value}
+										<LucideMailCheck class="text-green-500 dark:text-green-600 size-5" />
+									{:else}
+										<LucideMailWarning class="text-yellow-500 dark:text-yellow-600 size-5" />
+									{/if}
+								</Toggle>
+							</Tooltip.Trigger>
+							<Tooltip.Content>{label}</Tooltip.Content>
+						</Tooltip.Root>
+					</Tooltip.Provider>
+				</div>
+			</FormInput>
 			<FormInput label={m.first_name()} oninput={onNameInput} bind:input={$inputs.firstName} />
 			<FormInput label={m.last_name()} oninput={onNameInput} bind:input={$inputs.lastName} />
 			<FormInput