mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-03-24 16:30:05 +00:00
fix: move tooltip inside of form input to prevent shifting (#1369)
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user