sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

clicking "sign and send" with empty/wrong pw field violates layout shift policy #123

New Issue
Closed
opened 2026-03-01 01:21:08 +01:00 by sneak · 1 comment
sneak commented 2026-03-01 01:21:08 +01:00
Owner
Copy Link

"Please enter your password." or "Wrong password." error message appears, moving the button down off the screen. The error message space should be reserved so the button doesn't move when the error appears.

This is an obvious violation. Please very carefully audit the codebase for all locations where you insert or update elements like this as a result of user interaction (button clicks, field changes) or API results/errors. Go over each file a few times to determine all places you're modifying the layout intentionally or by accident, and try to itemize them here. Then make a PR fixing all of them.

"Please enter your password." or "Wrong password." error message appears, moving the button down off the screen. The error message space should be reserved so the button doesn't move when the error appears. This is an obvious violation. Please very carefully audit the codebase for all locations where you insert or update elements like this as a result of user interaction (button clicks, field changes) or API results/errors. Go over each file a few times to determine all places you're modifying the layout intentionally or by accident, and try to itemize them here. Then make a PR fixing all of them.
sneak added the
bot
 label 2026-03-01 01:21:08 +01:00
clawbot self-assigned this 2026-03-01 01:21:17 +01:00
clawbot commented 2026-03-01 01:31:15 +01:00
Collaborator
Copy Link

Layout Shift Audit Results

Audited all JS/HTML files for elements where error/warning/status messages toggle display:none (via hidden class), causing layout shift when they appear or disappear.

Violations Found (13 total)

# Element ID File(s) Pattern
1 confirm-tx-password-error index.html, confirmTx.js, helpers.js showError/hideError toggles hidden class, defeating existing min-h
2 confirm-warnings index.html, confirmTx.js classList.add/remove("hidden")
3 confirm-errors index.html, confirmTx.js classList.add/remove("hidden")
4 confirm-fee index.html, confirmTx.js Starts hidden, shown on load
5 approve-tx-error index.html, approval.js showError/hideError + direct classList.add("hidden")
6 approve-sign-error index.html, approval.js showError/hideError
7 approve-sign-danger-warning index.html, approval.js classList.add/remove("hidden")
8 export-privkey-flash index.html, addressDetail.js classList.add/remove("hidden")
9 delete-wallet-flash index.html, deleteWallet.js classList.add/remove("hidden")
10 add-wallet-phrase-warning index.html, addWallet.js classList.add/remove("hidden")
11 receive-erc20-warning index.html, receive.js classList.add/remove("hidden")
12 add-token-info index.html, addToken.js classList.add/remove("hidden")
13 settings-addtoken-info index.html, settingsAddToken.js classList.add/remove("hidden")

Already Correct

  • send-to-error — uses min-height: 1.25rem with textContent swap, no hidden toggle ✅
  • confirm-recipient-warning — already uses visibility: hidden/visible ✅
  • flash-msg — uses textContent swap with min-h-[1.25rem], no hidden toggle ✅

Fix Applied

All 13 violations fixed in branch fix/issue-123-layout-shift-audit:

  • showError/hideError in helpers.js now use visibility instead of hidden class
  • All error/status elements in HTML use style="visibility: hidden" + min-height where applicable
  • All JS files updated to use style.visibility instead of classList for these elements
  • docker build . passes with zero failures
## Layout Shift Audit Results Audited all JS/HTML files for elements where error/warning/status messages toggle `display:none` (via `hidden` class), causing layout shift when they appear or disappear. ### Violations Found (13 total) | # | Element ID | File(s) | Pattern | |---|-----------|---------|--------| | 1 | `confirm-tx-password-error` | index.html, confirmTx.js, helpers.js | `showError`/`hideError` toggles `hidden` class, defeating existing `min-h` | | 2 | `confirm-warnings` | index.html, confirmTx.js | `classList.add/remove("hidden")` | | 3 | `confirm-errors` | index.html, confirmTx.js | `classList.add/remove("hidden")` | | 4 | `confirm-fee` | index.html, confirmTx.js | Starts `hidden`, shown on load | | 5 | `approve-tx-error` | index.html, approval.js | `showError`/`hideError` + direct `classList.add("hidden")` | | 6 | `approve-sign-error` | index.html, approval.js | `showError`/`hideError` | | 7 | `approve-sign-danger-warning` | index.html, approval.js | `classList.add/remove("hidden")` | | 8 | `export-privkey-flash` | index.html, addressDetail.js | `classList.add/remove("hidden")` | | 9 | `delete-wallet-flash` | index.html, deleteWallet.js | `classList.add/remove("hidden")` | | 10 | `add-wallet-phrase-warning` | index.html, addWallet.js | `classList.add/remove("hidden")` | | 11 | `receive-erc20-warning` | index.html, receive.js | `classList.add/remove("hidden")` | | 12 | `add-token-info` | index.html, addToken.js | `classList.add/remove("hidden")` | | 13 | `settings-addtoken-info` | index.html, settingsAddToken.js | `classList.add/remove("hidden")` | ### Already Correct - `send-to-error` — uses `min-height: 1.25rem` with `textContent` swap, no `hidden` toggle ✅ - `confirm-recipient-warning` — already uses `visibility: hidden/visible` ✅ - `flash-msg` — uses `textContent` swap with `min-h-[1.25rem]`, no `hidden` toggle ✅ ### Fix Applied All 13 violations fixed in branch `fix/issue-123-layout-shift-audit`: - `showError`/`hideError` in helpers.js now use `visibility` instead of `hidden` class - All error/status elements in HTML use `style="visibility: hidden"` + `min-height` where applicable - All JS files updated to use `style.visibility` instead of `classList` for these elements - `docker build .` passes with zero failures
sneak closed this issue 2026-03-01 12:33:09 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels   
bot

Agent's turn to work

  
merge-ready

   
needs-checks

   
needs-rebase

   
needs-review

   
needs-rework
No Label
bot
merge-ready
needs-checks
needs-rebase
needs-review
needs-rework
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
clawbot
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: sneak/AutistMask#123
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?