1
0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-24 09:35:06 +00:00

fix: move tooltip inside of form input to prevent shifting (#1369)

This commit is contained in:
GameTec-live
2026-03-08 15:41:08 +01:00
committed by GitHub
parent 832b7fbff4
commit cad80e7d74

View File

@@ -2,6 +2,7 @@
import FormInput from '$lib/components/form/form-input.svelte'; import FormInput from '$lib/components/form/form-input.svelte';
import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte'; import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Toggle } from '$lib/components/ui/toggle'; import { Toggle } from '$lib/components/ui/toggle';
import * as Tooltip from '$lib/components/ui/tooltip/index.js'; import * as Tooltip from '$lib/components/ui/tooltip/index.js';
import { m } from '$lib/paraglide/messages'; import { m } from '$lib/paraglide/messages';
@@ -76,11 +77,13 @@
<fieldset disabled={inputDisabled}> <fieldset disabled={inputDisabled}>
<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2"> <div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
<FormInput label={m.username()} bind:input={$inputs.username} /> <FormInput label={m.username()} bind:input={$inputs.username} />
<FormInput label={m.email()} bind:input={$inputs.email} labelFor="email">
<div class="flex items-end"> <div class="flex items-end">
<FormInput <Input
inputClass="rounded-r-none border-r-0" id="email"
label={m.email()} class="rounded-r-none border-r-0"
bind:input={$inputs.email} aria-invalid={!!$inputs.email.error}
bind:value={$inputs.email.value}
/> />
<Tooltip.Provider> <Tooltip.Provider>
{@const label = $inputs.emailVerified.value {@const label = $inputs.emailVerified.value
@@ -104,6 +107,7 @@
</Tooltip.Root> </Tooltip.Root>
</Tooltip.Provider> </Tooltip.Provider>
</div> </div>
</FormInput>
<FormInput label={m.first_name()} oninput={onNameInput} bind:input={$inputs.firstName} /> <FormInput label={m.first_name()} oninput={onNameInput} bind:input={$inputs.firstName} />
<FormInput label={m.last_name()} oninput={onNameInput} bind:input={$inputs.lastName} /> <FormInput label={m.last_name()} oninput={onNameInput} bind:input={$inputs.lastName} />
<FormInput <FormInput