fix: the two dApp approval error containers shift 6px when an error appears #297

New Issue

clawbot · 2026-08-17T08:09:51+02:00

clawbot commented

2026-08-17 08:09:51 +02:00

Problem

#approve-tx-error and #approve-sign-error in src/popup/index.html reserve
min-h-[1.25rem] (20px) but are the only two error containers that also carry
border border-dashed p-1. With the Tailwind preflight's
box-sizing: border-box, the reserved 20px is consumed by 2px of border plus
8px of padding, leaving 10px of content box for a 16px line. Showing any error
grows the container to 26px and pushes the button row below it down by 6px.

The other four password error containers (#export-privkey-flash,
#show-phrase-flash, #delete-wallet-flash, #confirm-tx-password-error) have
no border and no padding, so 20px fits a 16px line exactly and they hold still.

RULES.md No Layout Shift requires that no UI element move when the reserved
area is filled.

Measurement

Built popup at a 360x600 viewport in the pinned Playwright container
(mcr.microsoft.com/playwright@sha256:35246d87..., the digest script/test-e2e
pins), one view visible at a time. Container height and the top of the element
directly below it:

== approve-tx (#approve-tx-error)
   empty, reserved            height=20 belowTop=405
   with an error sentence     height=26 belowTop=411

== approve-sign (#approve-sign-error)
   empty, reserved            height=20 belowTop=329
   with an error sentence     height=26 belowTop=335

Independent of which sentence is shown — the same 6px for every string
measured, including the one those screens display on next today.

Found

While discharging the layout requirement of
#265, which measured all six
password error containers. Out of scope there (strings only) and not touched by
it: the shift predates that change and is unaffected by it.

Implementation requirements

The two containers must not move anything when they become visible.
min-h-[1.875rem] (30px = 16px line + 8px padding + 2px border + the 4px the
plain containers spare) is the arithmetic; measure rather than trust it.
Do not change the other four containers, which already hold still.
No behaviour change.

Definition of done

#approve-tx-error and #approve-sign-error keep the same height empty
and filled, and nothing below them moves.
Measured at a 360px viewport in the pinned Playwright container, before
and after.
The other four password error containers are unchanged and still measure
at zero shift.
TODO.md updated in the same commit.
make check passes.

## Problem `#approve-tx-error` and `#approve-sign-error` in `src/popup/index.html` reserve `min-h-[1.25rem]` (20px) but are the only two error containers that also carry `border border-dashed p-1`. With the Tailwind preflight's `box-sizing: border-box`, the reserved 20px is consumed by 2px of border plus 8px of padding, leaving 10px of content box for a 16px line. Showing any error grows the container to 26px and pushes the button row below it down by 6px. The other four password error containers (`#export-privkey-flash`, `#show-phrase-flash`, `#delete-wallet-flash`, `#confirm-tx-password-error`) have no border and no padding, so 20px fits a 16px line exactly and they hold still. `RULES.md` No Layout Shift requires that no UI element move when the reserved area is filled. ## Measurement Built popup at a 360x600 viewport in the pinned Playwright container (`mcr.microsoft.com/playwright@sha256:35246d87...`, the digest `script/test-e2e` pins), one view visible at a time. Container height and the `top` of the element directly below it: ``` == approve-tx (#approve-tx-error) empty, reserved height=20 belowTop=405 with an error sentence height=26 belowTop=411 == approve-sign (#approve-sign-error) empty, reserved height=20 belowTop=329 with an error sentence height=26 belowTop=335 ``` Independent of which sentence is shown — the same 6px for every string measured, including the one those screens display on `next` today. ## Found While discharging the layout requirement of [#265](https://git.eeqj.de/sneak/AutistMask/issues/265), which measured all six password error containers. Out of scope there (strings only) and not touched by it: the shift predates that change and is unaffected by it. ## Implementation requirements - The two containers must not move anything when they become visible. `min-h-[1.875rem]` (30px = 16px line + 8px padding + 2px border + the 4px the plain containers spare) is the arithmetic; measure rather than trust it. - Do not change the other four containers, which already hold still. - No behaviour change. ## Definition of done - [ ] `#approve-tx-error` and `#approve-sign-error` keep the same height empty and filled, and nothing below them moves. - [ ] Measured at a 360px viewport in the pinned Playwright container, before and after. - [ ] The other four password error containers are unchanged and still measure at zero shift. - [ ] `TODO.md` updated in the same commit. - [ ] `make check` passes.

clawbot referenced this issue

2026-08-17 08:10:24 +02:00

fix: one wording for an empty password field on every screen (closes #265) #296

clawbot referenced this issue

2026-08-17 08:17:27 +02:00

fix: one wording for an empty password field on every screen (closes #265) #296

clawbot referenced this issue

2026-08-17 08:46:24 +02:00

fix: one wording for an empty password field on every screen (closes #265) #296

Sign in to join this conversation.