svecosystem/formsnap

Form Fields Styling Issues

Closed this issue · 1 comments

Describe the bug

<div class="flex space-x-4">
  <Form.Field {form} name="firstName">
    <Form.Control>
      {#snippet children({ props })}
        <Input {...props} bind:value={$formData.firstName} placeholder="First name" />
      {/snippet}
    </Form.Control>
    <Form.FieldErrors class="pb-4" />
  </Form.Field>

  <Separator orientation="vertical" class="h-[40px]"  />
  
  <Form.Field {form} name="lastName">
    <Form.Control>
      {#snippet children({ props })}
        <Input {...props} bind:value={$formData.lastName} placeholder="Last name" />
      {/snippet}
    </Form.Control>
    <Form.FieldErrors class="pb-4" />
  </Form.Field>
</div>

image
image

Reproduction

Put form fields within a div container as shown above and it will show issues like this. Doesn't even have to be styled.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 1800X Eight-Core Processor
    Memory: 22.12 GB / 31.93 GB
  Binaries:
    Node: 20.18.0 - ~\AppData\Local\Volta\tools\image\node\20.18.0\node.EXE
    npm: 10.8.2 - ~\AppData\Local\Volta\tools\image\node\20.18.0\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.8.0
    formsnap: ^2.0.0-next.1 => 2.0.0-next.1
    svelte: ^5.0.0 => 5.1.13
    sveltekit-superforms: ^2.20.0 => 2.20.0
    zod: ^3.23.8 => 3.23.8

Severity

annoyance

I'm not sure what I'm looking at. Formsnap doesn't provide any styles