Re work modal scrolling

This commit is contained in:
Jon Staab
2026-01-30 14:14:12 -08:00
parent 4169db33e6
commit 38c0a9d403
75 changed files with 2340 additions and 2030 deletions
+29 -25
View File
@@ -9,6 +9,8 @@
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Modal from "@lib/components/Modal.svelte"
import ModalBody from "@lib/components/ModalBody.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -35,30 +37,32 @@
let loading = $state(false)
</script>
<form class="column gap-4" onsubmit={preventDefault(onSubmit)}>
<ModalHeader>
{#snippet title()}
<div>Verify your Email Address</div>
{/snippet}
{#snippet info()}
<div>Enter the one-time confirmation code sent to your email</div>
{/snippet}
</ModalHeader>
<FieldInline>
{#snippet label()}
<p>Confirmation Code*</p>
{/snippet}
{#snippet input()}
<label class="input input-bordered flex w-full items-center gap-2">
<Icon icon={Key} />
<input bind:value={challenge} />
</label>
{/snippet}
</FieldInline>
<p class="text-sm">
We just sent a one-time confirmation code to {email}. Once you receive it, you can enter it
above.
</p>
<Modal tag="form" onsubmit={preventDefault(onSubmit)}>
<ModalBody>
<ModalHeader>
{#snippet title()}
<div>Verify your Email Address</div>
{/snippet}
{#snippet info()}
<div>Enter the one-time confirmation code sent to your email</div>
{/snippet}
</ModalHeader>
<FieldInline>
{#snippet label()}
<p>Confirmation Code*</p>
{/snippet}
{#snippet input()}
<label class="input input-bordered flex w-full items-center gap-2">
<Icon icon={Key} />
<input bind:value={challenge} />
</label>
{/snippet}
</FieldInline>
<p class="text-sm">
We just sent a one-time confirmation code to {email}. Once you receive it, you can enter it
above.
</p>
</ModalBody>
<ModalFooter>
<Button class="btn btn-link" onclick={back} disabled={loading}>
<Icon icon={AltArrowLeft} />
@@ -69,4 +73,4 @@
<Icon icon={AltArrowRight} />
</Button>
</ModalFooter>
</form>
</Modal>