fix(frontend): stop mobile token select flash and layout shift (#498)

PlasticDigits commented

2026-07-25 04:33:51 +00:00

(Migrated from gitlab.com)

Copy link

Summary

Fixes Swap TokenSearchSelect mobile flashes/CLS by keeping the leading logo + reserved left padding while the menu is open (#498).
Keeps the selected token label visible until the user edits (queryDraft), with focus select-all so typing replaces without an empty flash.
Documents invariants in docs/frontend.md and agent playbooks; adds unit + phone-width Playwright CLS coverage.

Closes #498

Test plan

npm test -- src/components/trade/__tests__/TokenSearchSelect.test.tsx (incl. #498 logo/label on open)
npm test -- src/components/ui/__tests__/TokenSelect.keyboard.test.tsx (Mint unchanged)
playwright test e2e/swap-token-select-cls.spec.ts --project=e2e-smoke (390×844; open/close stable) — passed twice
Manual phone-width Swap: open/close pay+receive repeatedly; pick another token; confirm no jump
Spot-check Mint TokenSelect (button listbox already keeps logo in trigger)
Optional: iOS Safari / Android Chrome eyeball

Acceptance criteria (#498)

Phone-width: opening token selector does not flash or shove adjacent controls
Selecting a different token updates trigger without layout jump (stable logo/padding)
Closing menu leaves scroll/layout stable (E2E asserts scrollY + boxes)
Verified on Swap (Trade market ticket is pair-bound; does not use this control)
Spot-check iOS Safari and Android Chrome (not available in this agent environment)

## Summary - Fixes Swap `TokenSearchSelect` mobile flashes/CLS by keeping the leading logo + reserved left padding while the menu is open ([#498](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/498)). - Keeps the selected token label visible until the user edits (`queryDraft`), with focus select-all so typing replaces without an empty flash. - Documents invariants in `docs/frontend.md` and agent playbooks; adds unit + phone-width Playwright CLS coverage. Closes #498 ## Test plan - [x] `npm test -- src/components/trade/__tests__/TokenSearchSelect.test.tsx` (incl. #498 logo/label on open) - [x] `npm test -- src/components/ui/__tests__/TokenSelect.keyboard.test.tsx` (Mint unchanged) - [x] `playwright test e2e/swap-token-select-cls.spec.ts --project=e2e-smoke` (390×844; open/close stable) — passed twice - [ ] Manual phone-width Swap: open/close pay+receive repeatedly; pick another token; confirm no jump - [ ] Spot-check Mint `TokenSelect` (button listbox already keeps logo in trigger) - [ ] Optional: iOS Safari / Android Chrome eyeball ## Acceptance criteria (#498) - [x] Phone-width: opening token selector does not flash or shove adjacent controls - [x] Selecting a different token updates trigger without layout jump (stable logo/padding) - [x] Closing menu leaves scroll/layout stable (E2E asserts scrollY + boxes) - [x] Verified on Swap (Trade market ticket is pair-bound; does not use this control) - [ ] Spot-check iOS Safari and Android Chrome (not available in this agent environment)

ghost1 commented

2026-07-25 04:33:54 +00:00

(Migrated from gitlab.com)

Copy link

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the [Cursor dashboard](https://www.cursor.com/dashboard/bugbot) to get automatic reviews on future PRs.

PlasticDigits commented

2026-07-25 04:34:33 +00:00

(Migrated from gitlab.com)

Copy link

added 2 commits

d6855ac2 - chore(contracts): drop unneeded hybrid wildcard for clippy 1.97
36ee47d0 - fix(frontend): stop mobile token select flash and layout shift (#498)

Compare with previous version

added 2 commits <ul><li>d6855ac2 - chore(contracts): drop unneeded hybrid wildcard for clippy 1.97</li><li>36ee47d0 - fix(frontend): stop mobile token select flash and layout shift (#498)</li></ul> [Compare with previous version](/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/318/diffs?diff_id=1923587907&start_sha=d1367e881445742b5996b955d14d6db72418adcc)

ghost1 commented

2026-07-25 04:34:35 +00:00

(Migrated from gitlab.com)

Copy link

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the [Cursor dashboard](https://www.cursor.com/dashboard/bugbot) to get automatic reviews on future PRs.

Rows
Columns

fix(frontend): stop mobile token select flash and layout shift (#498) #1036

Summary

Test plan

Acceptance criteria (#498)