Widen the vault password fields - #153
Merged
TeoSlayer merged 1 commit intoSep 14, 2026
Merged
Conversation
`.vault-input` is 8ch wide because it was drawn for the four-letter recovery-key confirmation, but the same class dresses every vault password field: setup, unlock, and the Account page's unlock methods. A password typed into an eight-character box is hard to type and impossible to check. Password inputs are now 16ch, twice as wide, via an attribute selector so the key-confirm box and the wide recovery-key textarea are untouched. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ueq619VZvd44TY7bF43KDR
5 tasks
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 free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
What changed
.vault-inputis 8ch wide because it was drawn for the four-letter recovery-key confirmation, but the same class dresses every vault password field: the setup form, the unlock gate, and the unlock-methods section on the Account page. A password typed into an eight-character box is hard to type and impossible to check.This adds one rule,
.vault-input[type="password"] { width: 16ch; }, so the six password inputs are twice as wide. The key-confirm box (XXXX) and the two-line recovery-key textarea keep their current widths. CSS only; no markup or logic changed.Out of scope, noted for later:
.vault-inputalso appliestext-transform: uppercase, so the "At least 8 characters" placeholder on the setup form renders asAT LEAST 8 C…and is still clipped at 16ch. It only affects the placeholder, never the typed password.Verification
app/:npm run lint(pre-existing warnings only, none in this file),npm run build(tsc + vite + server bundle succeed;check-bundlereports the expected missingVITE_FIREBASE_*values on a machine without.env.local), andnpm test(841 passed, 3 skipped)npm run check/npm run build:webandgo test -race ./.../go vet ./...were not run: the change touches onlyapp/src/styles/vault.csstype="password"; nothing about what is sent or stored changesRendered the setup and unlock screens with the app's stylesheets before and after: the password box goes from roughly 5 visible bullets to roughly 12, and still fits inside the card at a 400px viewport.
Changelog
Added under Unreleased → Fixed.
🤖 Generated with Claude Code
https://claude.ai/code/session_01Ueq619VZvd44TY7bF43KDR