Uh oh!
There was an error while loading. Please reload this page.
Fix submit button overflow on auth form cards (fieldset min-width) - #559
Merged
Conversation
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 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>
This was referenced May 22, 2026
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-defaultmin-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'sw-fullhonored the wider fieldset — overflowing ~100px past the card edge.Fix:
min-w-0on 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↔@loadingbranch 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@loadingbranch already renders the spinner + "Sending magic link..." state. Also addedmin-w-0 max-w-fullto the button itself as belt-and-suspenders.Test plan
Verified in Chrome at
/phoenix_kit/users/magic-link:"✉ Send Magic Link →"still on one line in disabled state<svg data-phx-skip>in the button DOM