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

New Issue

2026-03-01T01:21:08+01:00

sneak commented

2026-03-01 01:21:08 +01:00

"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.

clawbot self-assigned this 2026-03-01 01:21:17 +01:00

clawbot referenced this issue from a commit

2026-03-01 01:30:53 +01:00

fix: reserve space for all error/status messages — closes #123

clawbot commented

2026-03-01 01:31:15 +01:00

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

clawbot referenced a pull request that will close this issue

2026-03-01 01:31:31 +01:00

fix: reserve space for all error/status messages — closes #123 #124

sneak closed this issue

2026-03-01 12:33:09 +01:00

sneak referenced this issue from a commit

2026-03-01 12:33:11 +01:00

Merge pull request 'fix: reserve space for all error/status messages — closes #123' (#124) from fix/issue-123-layout-shift-audit into main

Sign in to join this conversation.