Bug: Input fields in login/signup modals are too small #235

New Issue

2026-04-18T12:48:42Z

DeveshSingh commented

2026-04-18 12:48:42 +00:00

Describe the bug

The text input fields across the authentication and sign-up modals (e.g., "Sign up with Email", "Log In", "Password Reset") are visually truncated and no longer expand to fill their container width. Instead, they collapse to their minimum intrinsic size, leaving a large amount of empty space next to the input labels and making them difficult to interact with.

To Reproduce

Navigate to the landing page and click on "Sign up" or "Log In".
Select the "Email" option (or any option requiring text input).
Observe that the input fields (e.g., Email, Password) are unusually short and do not stretch to the right edge of the modal.

Root Cause

This issue was introduced in a recent PR that modified src/lib/components/FieldInline.svelte. The layout of FieldInline was changed from a CSS Grid to a Flexbox layout.

Specifically, the wrapper <div> around the input snippet was given a shrink-0 class:

<div class="flex items-center gap-2 justify-end shrink-0">
  {@render props.input()}
</div>

### Describe the bug The text input fields across the authentication and sign-up modals (e.g., "Sign up with Email", "Log In", "Password Reset") are visually truncated and no longer expand to fill their container width. Instead, they collapse to their minimum intrinsic size, leaving a large amount of empty space next to the input labels and making them difficult to interact with. ### To Reproduce 1. Navigate to the landing page and click on "Sign up" or "Log In". 2. Select the "Email" option (or any option requiring text input). 3. Observe that the input fields (e.g., Email, Password) are unusually short and do not stretch to the right edge of the modal. ### Root Cause This issue was introduced in a recent PR that modified `src/lib/components/FieldInline.svelte`. The layout of `FieldInline` was changed from a CSS Grid to a Flexbox layout. Specifically, the wrapper `<div>` around the input snippet was given a `shrink-0` class: ```svelte <div class="flex items-center gap-2 justify-end shrink-0"> {@render props.input()} </div>

Screenshot 2026-04-18 010439.png

82 KiB

Screenshot 2026-04-18 181319.png

81 KiB