Part of epic #40. Track: CLS (layout shift). Paths are relative to carpincho-wallet/.
Priority
Medium
User story / Problem statement
Fixed 420x600 popup sizing and explicitly-dimensioned media keep CLS minor in the carpincho-wallet popup, but two layout swaps still shift the submit button: the loading-to-content transition reflows centered→top-aligned, and the unlock error alert is inserted between input and submit button.
Expected outcome
- The unlock error and the loading-to-content transition reserve layout so they do not shift the submit button or the view.
Acceptance criteria
Technical notes
- [Medium]
src/App.tsx:37 — spinner-to-content swap replaces a vertically centered justify-center spinner with a top-aligned content column (non-loading branch at src/App.tsx:45 drops items-center justify-center). When isLoading flips, layout reflows centered→top-flow. Fix: render the loading state inside the same column layout, or use a same-box skeleton.
- [Medium]
src/views/UnlockView.tsx:67 — the error Alert is conditionally inserted between input and submit button, pushing the button down when an incorrect password appears. (PasswordStrengthIndicator itself reserves space; src/components/PasswordStrengthIndicator.tsx:35.) Fix: reserve space for the alert (min-height container).
- [Low / mitigating] Toasts render via
createPortal into a position:fixed viewport (src/components/ui/ToastProvider.tsx:19,:114) and overlay rather than push. No fix.
- [Low / mitigating] Sheets/dialogs are Radix
Dialog.Portal with fixed positioning and inset-0 overlay (src/components/ui/Sheet.tsx:9), overlaying rather than reflowing. No fix.
- [Low / mitigating] Logo
img has explicit width/height (src/components/Logo.tsx:13); SVG icons carry hardcoded width/height (src/components/ui/icons.tsx:273); AccountAvatar uses fixed sizes. No icon/avatar CLS risk.
- [Low / mitigating]
html[data-runtime="extension"] pins width 420px and min-height 600px (src/index.css:358), the primary CLS mitigant; decorative animations use transform/opacity only and are disabled under prefers-reduced-motion. No fix.
Additional context
Method: static (lab/heuristic) review — extension popups have no CrUX field data. Findings 13–16 are mitigating context, not defects; only 11 and 12 require changes.
Priority
Medium
User story / Problem statement
Fixed 420x600 popup sizing and explicitly-dimensioned media keep CLS minor in the carpincho-wallet popup, but two layout swaps still shift the submit button: the loading-to-content transition reflows centered→top-aligned, and the unlock error alert is inserted between input and submit button.
Expected outcome
Acceptance criteria
isLoadingdoes not reflow centered→top-aligned.Technical notes
src/App.tsx:37— spinner-to-content swap replaces a vertically centeredjustify-centerspinner with a top-aligned content column (non-loading branch atsrc/App.tsx:45dropsitems-center justify-center). WhenisLoadingflips, layout reflows centered→top-flow. Fix: render the loading state inside the same column layout, or use a same-box skeleton.src/views/UnlockView.tsx:67— the error Alert is conditionally inserted between input and submit button, pushing the button down when an incorrect password appears. (PasswordStrengthIndicatoritself reserves space;src/components/PasswordStrengthIndicator.tsx:35.) Fix: reserve space for the alert (min-height container).createPortalinto aposition:fixedviewport (src/components/ui/ToastProvider.tsx:19,:114) and overlay rather than push. No fix.Dialog.Portalwith fixed positioning andinset-0overlay (src/components/ui/Sheet.tsx:9), overlaying rather than reflowing. No fix.imghas explicit width/height (src/components/Logo.tsx:13); SVG icons carry hardcoded width/height (src/components/ui/icons.tsx:273);AccountAvataruses fixed sizes. No icon/avatar CLS risk.html[data-runtime="extension"]pins width 420px and min-height 600px (src/index.css:358), the primary CLS mitigant; decorative animations use transform/opacity only and are disabled underprefers-reduced-motion. No fix.Additional context
Method: static (lab/heuristic) review — extension popups have no CrUX field data. Findings 13–16 are mitigating context, not defects; only 11 and 12 require changes.