Comprehensive audit and fix of all layout shift violations caused by error/status message elements toggling `display:none` via the `hidden` CSS class.
## Problem
When error messages appeared (e.g. wrong password on "Sign & Send"), they used `display:none` → `display:block` which pushed buttons off-screen.
## Fix
- `showError`/`hideError` in helpers.js now use `visibility:hidden/visible` instead of toggling the `hidden` class
- All 13 error/warning/status elements in index.html updated to use `visibility:hidden` with `min-height` for reserved space
- All view JS files updated to use `style.visibility` instead of `classList` for error/status elements
## Files Changed
- `src/popup/index.html` — 13 elements updated
- `src/popup/views/helpers.js` — `showError`/`hideError` rewritten
- `src/popup/views/confirmTx.js` — warnings, errors, fee section
- `src/popup/views/approval.js` — tx-error, sign-error, danger-warning
- `src/popup/views/addressDetail.js` — export-privkey-flash
- `src/popup/views/deleteWallet.js` — delete-wallet-flash
- `src/popup/views/addWallet.js` — phrase-warning
- `src/popup/views/receive.js` — erc20-warning
- `src/popup/views/addToken.js` — add-token-info
- `src/popup/views/settingsAddToken.js` — settings-addtoken-info
Closes #123
Replace display:none (hidden class) with visibility:hidden/visible for all
error, warning, and status message elements across the extension UI. This
prevents layout shift when messages appear or disappear.
Changes:
- helpers.js: showError/hideError now use visibility instead of hidden class
- index.html: all error/status divs use visibility:hidden + min-height
- confirmTx.js: warnings, errors, fee section use visibility
- approval.js: tx-error, sign-error, danger-warning use visibility
- addressDetail.js: export-privkey-flash uses visibility
- deleteWallet.js: delete-wallet-flash uses visibility
- addWallet.js: phrase-warning uses visibility
- receive.js: erc20-warning uses visibility
- addToken.js: add-token-info uses visibility
- settingsAddToken.js: settings-addtoken-info uses visibility
clawbot
self-assigned this 2026-03-01 01:31:44 +01:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Comprehensive audit and fix of all layout shift violations caused by error/status message elements toggling
display:nonevia thehiddenCSS class.Problem
When error messages appeared (e.g. wrong password on "Sign & Send"), they used
display:none→display:blockwhich pushed buttons off-screen.Fix
showError/hideErrorin helpers.js now usevisibility:hidden/visibleinstead of toggling thehiddenclassvisibility:hiddenwithmin-heightfor reserved spacestyle.visibilityinstead ofclassListfor error/status elementsFiles Changed
src/popup/index.html— 13 elements updatedsrc/popup/views/helpers.js—showError/hideErrorrewrittensrc/popup/views/confirmTx.js— warnings, errors, fee sectionsrc/popup/views/approval.js— tx-error, sign-error, danger-warningsrc/popup/views/addressDetail.js— export-privkey-flashsrc/popup/views/deleteWallet.js— delete-wallet-flashsrc/popup/views/addWallet.js— phrase-warningsrc/popup/views/receive.js— erc20-warningsrc/popup/views/addToken.js— add-token-infosrc/popup/views/settingsAddToken.js— settings-addtoken-infoCloses #123