fix(frontend): mobile flashes and layout shift on token selection #498

New issue

Closed

opened 2026-07-15 04:13:40 +00:00 by PlasticDigits · 11 comments

PlasticDigits commented

2026-07-15 04:13:40 +00:00

(Migrated from gitlab.com)

Summary

On mobile, opening/changing token selection causes annoying visual flashes and UI elements jumping / moving places (layout shift). The interaction feels unstable and distracting.

Expected

Token picker open/close and token change should feel smooth on mobile.
No flash of unstyled/empty content, wrong layout, or sudden repositioning of controls.
Surrounding swap/trade UI should keep stable positions (minimal CLS) while the selector updates.

Actual

Noticeable flashes when selecting tokens on mobile.
Nearby UI shifts / elements move places during the interaction.

Likely context

Swap/Trade pay & receive use TokenSearchSelect (#481); Mint still uses TokenSelect. Suspect causes include:

Dropdown/portal mount/unmount without reserved space or exit transition
Trigger width changing when token symbol/logo updates
Loading/skeleton ↔ content swap flashing
Mobile viewport / keyboard / scroll locking reflow when the menu opens

Acceptance criteria

On a phone-width viewport, opening the token selector does not flash or shove adjacent controls.
Selecting a different token updates the trigger without a visible layout jump (stable trigger size or reserved space for icon + symbol).
Closing the menu leaves the page scroll/layout stable (no jump back).
Verified on Swap (and Trade market if same control); Mint TokenSelect if it shows the same issue.
Spot-check iOS Safari and Android Chrome if possible.

How to reproduce

Open the dApp on a mobile device (or narrow DevTools viewport).
Go to Swap (or Trade).
Tap pay or receive token selection.
Open the list, pick another token, and/or open/close repeatedly.
Observe flashes and elements shifting position.

## Summary On **mobile**, opening/changing **token selection** causes annoying **visual flashes** and UI elements **jumping / moving places** (layout shift). The interaction feels unstable and distracting. ## Expected - Token picker open/close and token change should feel smooth on mobile. - No flash of unstyled/empty content, wrong layout, or sudden repositioning of controls. - Surrounding swap/trade UI should keep stable positions (minimal CLS) while the selector updates. ## Actual - Noticeable flashes when selecting tokens on mobile. - Nearby UI shifts / elements move places during the interaction. ## Likely context Swap/Trade pay & receive use `TokenSearchSelect` (#481); Mint still uses `TokenSelect`. Suspect causes include: - Dropdown/portal mount/unmount without reserved space or exit transition - Trigger width changing when token symbol/logo updates - Loading/skeleton ↔ content swap flashing - Mobile viewport / keyboard / scroll locking reflow when the menu opens ## Acceptance criteria - [ ] On a phone-width viewport, opening the token selector does not flash or shove adjacent controls. - [ ] Selecting a different token updates the trigger without a visible layout jump (stable trigger size or reserved space for icon + symbol). - [ ] Closing the menu leaves the page scroll/layout stable (no jump back). - [ ] Verified on Swap (and Trade market if same control); Mint `TokenSelect` if it shows the same issue. - [ ] Spot-check iOS Safari and Android Chrome if possible. ## How to reproduce 1. Open the dApp on a mobile device (or narrow DevTools viewport). 2. Go to Swap (or Trade). 3. Tap pay or receive token selection. 4. Open the list, pick another token, and/or open/close repeatedly. 5. Observe flashes and elements shifting position.

PlasticDigits commented

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

(Migrated from gitlab.com)

mentioned in merge request !1036

PlasticDigits commented

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

(Migrated from gitlab.com)

mentioned in commit 36ee47d0c4

mentioned in commit 36ee47d0c483681aad390399a79f20b1b8745edf

PlasticDigits commented

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

(Migrated from gitlab.com)

Implemented on MR !1036 (fix/498-mobile-token-select-cls).

Root cause: TokenSearchSelect unmounted the leading logo and dropped left padding when opening, which flashed/shifted the trigger on mobile.

Fix: keep logo + .token-select-trigger--with-leading-logo while open; keep selected label until edit (queryDraft); docs/skills + unit + Playwright CLS coverage.

Implemented on MR !1036 (`fix/498-mobile-token-select-cls`). Root cause: `TokenSearchSelect` unmounted the leading logo and dropped left padding when opening, which flashed/shifted the trigger on mobile. Fix: keep logo + `.token-select-trigger--with-leading-logo` while open; keep selected label until edit (`queryDraft`); docs/skills + unit + Playwright CLS coverage.

PlasticDigits commented

2026-07-25 04:52:18 +00:00

(Migrated from gitlab.com)

mentioned in commit b3e11cbb47

mentioned in commit b3e11cbb473911c7f0795cb9a317317c2109983e

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-07-25 04:52:18 +00:00

PlasticDigits commented

2026-08-17 03:45:50 +00:00

(Migrated from gitlab.com)

mentioned in issue #542