Problem
The Login account page (login-panel in internal/server/templates/settings.html:42) lays its sections out in a lg:grid-cols-2 grid. On large screens:
- Password takes only the left column, and the right half of that row is empty.
- Passkeys spans both columns (
lg:col-span-2) underneath.
As a result the password box and its fields are half-width, and the two boxes don't line up with each other.
Expected behavior
The page reads as one consistent column of full-width sections. Password and Passkeys both span the content width. Within the Password section, the controls are arranged to use that width well rather than being stretched, for example:
- the "Password login" on/off row across the top;
- Current password and New password side by side on wide screens (stacked on narrow ones), with Change password aligned beneath them.
Acceptance criteria
- Password and Passkeys have the same width and line up at every supported breakpoint. No empty grid cells.
- Password inputs keep a comfortable width: they don't span the whole
max-w-6xl container as one long field.
- Every Password state still lays out cleanly: password login on (with the form), password login off, and no password set. The same goes for its success and error messages.
- The password-confirm modal for passkeys and the "Add passkey" modal are unaffected.
- Works in light and dark modes and on mobile.
Related
The Profile page (profile-panel) uses the same lg:grid-cols-2 wrapper around a single card, so it has the same half-width look. Consider applying the same fix there so the account pages match (TRACK-75).
