Skip to content

Fix submit button overflow on auth form cards (fieldset min-width) - #559

Merged
ddon merged 1 commit into
BeamLabEU:devfrom
mdon:fix-auth-form-fieldset-overflow
May 21, 2026
Merged

Fix submit button overflow on auth form cards (fieldset min-width)#559
ddon merged 1 commit into
BeamLabEU:devfrom
mdon:fix-auth-form-fieldset-overflow

Conversation

@mdon

@mdonmdon commented May 21, 2026

Copy link
Copy Markdown
Contributor

Summary

Surfaced while testing the projects-side AI Translate work — the magic-link form's submit button visibly stuck out past the card on the right after submit, with text wrapping awkwardly across three lines.

Two root causes, both fixed:

1. <fieldset> browser-default min-width

<fieldset> carries a browser-default min-width: min-content. When a long-content child (the icon + Send Magic Link → button) had a wider intrinsic size than the form, the fieldset grew past the form's width, and the button's w-full honored the wider fieldset — overflowing ~100px past the card edge.

Fix: min-w-0 on the fieldset. Two of eight auth forms (magic_link_registration, registration) already had this exact fix — someone hit this bug class before and patched those two but missed the other six. Applied uniformly across all six remaining: confirmation, confirmation_instructions, forgot_password, login, magic_link, reset_password.

2. phx-disable-with@loading branch collision (magic-link only)

The magic-link form had both phx-disable-with="Sending magic link..." AND an <%= if @loading do %> branch in the button content. Both mechanisms swap the button content on submit. The double-swap confused Phoenix LV's diff merger, which injected a stray empty <svg data-phx-skip> element from the post-submit success-alert icon into the button (default SVG dims = 300×150, computed to ~183×150 in this layout). That squeezed the real text to wrap onto three lines.

Fix: dropped phx-disable-with. The @loading branch already renders the spinner + "Sending magic link..." state. Also added min-w-0 max-w-full to the button itself as belt-and-suspenders.

Test plan

Verified in Chrome at /phoenix_kit/users/magic-link:

  • Initial render: button is exactly form-width (336px), text on one line
  • Post-submit: button stays form-width, "✉ Send Magic Link →" still on one line in disabled state
  • Success alert renders cleanly below the button
  • No phantom <svg data-phx-skip> in the button DOM
  • No JS console errors

The magic-link submit button (and likely siblings) overflowed the
card on the right after submit, with text wrapping awkwardly.
Two root causes, both fixed:
1. `<fieldset>` carries a browser-default `min-width: min-content`.
With a long-content child (the icon + "Send Magic Link →"
button), the fieldset grew past its parent <form>'s width,
carrying the `w-full` button along for the ride — visible
overflow ~100px past the card edge.
Fix: `min-w-0` on the fieldset. Two of eight auth forms
(magic_link_registration, registration) already had this
exact fix, just missed the other six. Applied uniformly
across all six: confirmation, confirmation_instructions,
forgot_password, login, magic_link, reset_password.
2. On the magic-link form, `phx-disable-with="Sending magic
link..."` collided with the explicit `@loading` branch. Both
mechanisms swap the button content on submit. The
double-swap caused Phoenix LV's diff merger to inject a
stray empty `<svg data-phx-skip>` element (~183px wide,
default SVG dimensions) from the post-submit success-alert
icon into the button — squeezing the real text to wrap onto
three lines.
Fix: dropped `phx-disable-with` from the magic-link button.
`@loading` already renders the spinner + "Sending magic
link..." state when the LV is waiting on the server.
Also added `min-w-0 max-w-full` to the button itself as
belt-and-suspenders against any future fieldset regression.
Verified end-to-end in Chrome:
- Initial render: button is 336px wide, exactly form/fieldset
width, "✉ Send Magic Link →" on one line
- Post-submit: button stays 336px, "✉ Send Magic Link →" still
on one line in its disabled state, success alert renders
cleanly below
@ddon
ddon merged commit f9d986a into BeamLabEU:devMay 21, 2026
ddon pushed a commit that referenced this pull request May 21, 2026
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ddon pushed a commit that referenced this pull request May 21, 2026
The send_magic_link handler is synchronous (assigns loading: true then
overwrites with loading: false before returning, no render between), so
the if-@Loading spinner branch never rendered. phx-disable-with is the
real in-flight feedback and stays. Also correct the PR #559 review note
that had wrongly flagged this page for the phx-disable-with double-swap.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ddon pushed a commit that referenced this pull request May 25, 2026
…W_UP.md
The only still-live finding was the cosmetic class divergence on 2 of
8 auth forms: registration and magic_link_registration carried
'fieldset w-full min-w-0', the other 6 just 'fieldset min-w-0'.
Behaviorally identical (parent's align-items: stretch provides the
full width), but the inconsistent class string is a future-grep
gotcha. Dropped 'w-full' from the two so all 8 forms now share the
same shape.
ddon pushed a commit that referenced this pull request May 25, 2026
Release rollup since 1.7.120:
- PR #568: native <dialog> modal (PkDialog), core list-UI toolkit
(BulkSelect, Sortable, ReorderModal, load_more), race-free sort_selector
- PR #568 post-merge review fixes (untranslated reorder label, named group/row)
- PR #569: PhoenixKit.boot/1 hook, locale-aware Activity dates, broad i18n sweep
- PR #550/#552/#554/#557/#558/#559 follow-ups
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@mdon@ddon