fix: restore consistent input field sizing and alignment in FieldInline (#235) #238

2026-04-18T15:59:40Z

DeveshSingh commented

2026-04-18 15:59:40 +00:00

Title

fix: restore consistent input field sizing and alignment in FieldInline.

Description

This PR resolves an issue where text input fields in authentication and sign-up modals (Email, Password, etc.) were collapsing to their minimum width and had inconsistent sizes.

This occurred due to a recent migration of FieldInline from CSS Grid to Flexbox. The flexbox shrink-0 wrapper prevented inputs from expanding, and the lack of a defined label width caused the remaining space (and thus input widths) to vary based on the length of the label text (e.g., "Email*" vs "Password*").

Changes Made

FieldInline.svelte updates:
- Added min-w-[30%] to the label container. This guarantees that short labels (like in auth forms) take up a consistent baseline width, ensuring the remaining space for the inputs is identical and they align perfectly. Long labels (like in Settings) are unaffected and can still stretch up to 80%.
- Replaced shrink-0 with grow on the input wrapper, allowing the container to expand and fill the remaining horizontal space.
Input Component standardization:
- Added class="grow" to the inner <input> tags across authentication components (SignUpEmail, SignUpEmailConfirm, LogInEmail, LogInOTP, LogInKey, PasswordResetConfirm). This aligns with DaisyUI v4 best practices for inputs placed inside .input-bordered containers, ensuring the text area actually expands to fill the grow wrapper.

Related Issues

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

Testing Instructions

Navigate to the Log In or Sign Up modals.
Verify that the "Email" and "Password" input boxes now stretch horizontally to fill the container and are exactly the same width.
Navigate to Settings -> Alerts.
Verify that the long labels (e.g., "Always notify me when mentioned") still display correctly without restrictive wrapping, and the toggle switches remain properly aligned to the right.

### Title fix: restore consistent input field sizing and alignment in FieldInline. ### Description This PR resolves an issue where text input fields in authentication and sign-up modals (Email, Password, etc.) were collapsing to their minimum width and had inconsistent sizes. This occurred due to a recent migration of `FieldInline` from CSS Grid to Flexbox. The flexbox `shrink-0` wrapper prevented inputs from expanding, and the lack of a defined label width caused the remaining space (and thus input widths) to vary based on the length of the label text (e.g., "Email*" vs "Password*"). ### Changes Made * **` FieldInline.svelte` updates**: * Added `min-w-[30%]` to the label container. This guarantees that short labels (like in auth forms) take up a consistent baseline width, ensuring the remaining space for the inputs is identical and they align perfectly. Long labels (like in Settings) are unaffected and can still stretch up to 80%. * Replaced `shrink-0` with `grow` on the input wrapper, allowing the container to expand and fill the remaining horizontal space. * **Input Component standardization**: * Added `class="grow"` to the inner `<input>` tags across authentication components (`SignUpEmail`, `SignUpEmailConfirm`, `LogInEmail`, `LogInOTP`, `LogInKey`, `PasswordResetConfirm`). This aligns with DaisyUI v4 best practices for inputs placed inside `.input-bordered` containers, ensuring the text area actually expands to fill the `grow` wrapper. ### Related Issues * Fixes #235 ### Testing Instructions 1. Navigate to the **Log In** or **Sign Up** modals. 2. Verify that the "Email" and "Password" input boxes now stretch horizontally to fill the container and are exactly the same width. 3. Navigate to **Settings -> Alerts**. 4. Verify that the long labels (e.g., "Always notify me when mentioned") still display correctly without restrictive wrapping, and the toggle switches remain properly aligned to the right.

Screenshot 2026-04-18 200659.png

49 KiB

Screenshot 2026-04-18 200736.png

81 KiB

Screenshot 2026-04-18 200823.png

110 KiB

Screenshot 2026-04-18 200838.png

121 KiB

Screenshot 2026-04-18 200905.png

112 KiB