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

clawbot · 2026-03-01T01:31:31+01:00

clawbot commented

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

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

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

clawbot added the

needs-review

bot

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

clawbot added 1 commit 2026-03-01 01:31:31 +01:00

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

check / check (push) Successful in 22s

Details

813993f17c

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

clawbot added

merge-ready

and removed

needs-review

labels 2026-03-01 01:32:07 +01:00

clawbot removed their assignment 2026-03-01 01:32:08 +01:00

sneak was assigned by clawbot

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

sneak merged commit 834228b572 into main

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

sneak deleted branch fix/issue-123-layout-shift-audit