code/cl8y-dex-terraclassic

Fork 0

W13-C2: Pair selector causes layout shift (CLS 0.12) — content jumps when dropdown opens #181

New issue

Closed

opened 2026-05-21 15:03:07 +00:00 by totdking · 15 comments

totdking commented

2026-05-21 15:03:07 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-21 15:03:42 +00:00

(Migrated from gitlab.com)

Issue Summary

Opening the pair selector dropdown causes visible content to shift position on the page. Chrome Lighthouse measures a Cumulative Layout Shift (CLS) of 0.12 (needs improvement; threshold: under 0.1 is good). The shift is triggered by the pair selector button itself (button#trade-pair-select.token-select-trigger), which is recorded as the worst offender in the Lighthouse layout shift report.

Reproduction Steps

Open the trade page at a valid pair
Watch the area around the pair selector and the content near it
Click the pair selector to open the dropdown
Observe whether any surrounding content jumps or shifts position when the dropdown opens

Expected Behavior

Opening the pair selector dropdown should not cause any other content on the page to move. The dropdown should appear without shifting the layout.

Actual Behavior

Clicking the pair selector causes surrounding content to shift position
Lighthouse CLS: 0.12 (needs improvement)
Pair selector button identified as the layout shift source in the Lighthouse report

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome 148 (desktop)
Viewport	~1440px desktop
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev` at `localhost:3000`

How to Verify When Fixed

Open the trade page on the fixed build
Watch the content around the pair selector carefully
Click the pair selector to open the dropdown
Eyeball check: Does anything on the page jump or shift when the dropdown opens? If nothing moves, that part is fixed
Open DevTools → Lighthouse tab → click Analyze page load → wait for the report
Check the CLS value in the report
Pass: Nothing visibly shifts when the dropdown opens AND CLS is under 0.1
Fail: Content still shifts on dropdown open OR CLS is still above 0.1

Severity / Impact

P3 Polish. Layout shifts are disorienting and unprofessional, particularly on a trading interface where precise clicking matters. A CLS of 0.12 is noticeable. Found under W13-C2 (Performance — interaction latency and visual stability).

cc: @PlasticDigits

### Issue Summary Opening the pair selector dropdown causes visible content to shift position on the page. Chrome Lighthouse measures a Cumulative Layout Shift (CLS) of **0.12** (needs improvement; threshold: under 0.1 is good). The shift is triggered by the pair selector button itself (`button#trade-pair-select.token-select-trigger`), which is recorded as the worst offender in the Lighthouse layout shift report. --- ### Reproduction Steps 1. Open the trade page at a valid pair 2. Watch the area around the pair selector and the content near it 3. Click the pair selector to open the dropdown 4. Observe whether any surrounding content jumps or shifts position when the dropdown opens --- ### Expected Behavior Opening the pair selector dropdown should not cause any other content on the page to move. The dropdown should appear without shifting the layout. --- ### Actual Behavior - Clicking the pair selector causes surrounding content to shift position - Lighthouse CLS: **0.12** (needs improvement) - Pair selector button identified as the layout shift source in the Lighthouse report --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome 148 (desktop) | | Viewport | \~1440px desktop | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` at `localhost:3000` | --- ### How to Verify When Fixed 1. Open the trade page on the fixed build 2. Watch the content around the pair selector carefully 3. Click the pair selector to open the dropdown 4. **Eyeball check:** Does anything on the page jump or shift when the dropdown opens? If nothing moves, that part is fixed 5. Open DevTools → **Lighthouse** tab → click **Analyze page load** → wait for the report 6. Check the **CLS** value in the report 7. **Pass:** Nothing visibly shifts when the dropdown opens AND CLS is under 0.1 8. **Fail:** Content still shifts on dropdown open OR CLS is still above 0.1 --- ### Severity / Impact **P3 Polish.** Layout shifts are disorienting and unprofessional, particularly on a trading interface where precise clicking matters. A CLS of 0.12 is noticeable. Found under **W13-C2** (Performance — interaction latency and visual stability). cc: @PlasticDigits

totdking commented

2026-05-21 15:04:15 +00:00

(Migrated from gitlab.com)

mentioned in issue #116

PlasticDigits commented

2026-05-22 06:15:45 +00:00

(Migrated from gitlab.com)

mentioned in commit 02185e60cc

mentioned in commit 02185e60cca204c7aa27ad21fce6202c23848693

PlasticDigits commented

2026-05-22 06:15:57 +00:00

(Migrated from gitlab.com)

Fix landed on `main` (`e07b253`)

Summary: Opening #trade-pair-select on /trade no longer shifts surrounding layout. CLS drivers addressed: synchronous fixed portal positioning on first open frame, reserved focus-ring footprint on .token-select-trigger, .token-select-root layout containment, scrollbar-gutter: stable on html, and trade pair shell shrink-0.

Code: portalListboxPosition.ts, PortalListbox.tsx, MenuSelect/TokenSelect wrappers, index.css, TradePage.tsx.

Docs / agent playbooks: docs/frontend.md § Portal listboxes — layout stability, skills/AGENTS_FRONTEND_PORTAL_LISTBOX_CLS.md (cross-linked from trade layout + a11y focus skills).

Automated checks (527 unit tests passed locally): portalListboxPosition.test.ts; Playwright e2e/trade-pair-select-cls.spec.ts (needs LocalTerra + LCD + indexer).

Verification checklist

git pull → main at e07b253 or later
VITE_NETWORK=local npm run dev → open /trade at ~1440px desktop
Click Pair (#trade-pair-select) — chart, order book, and ticket columns do not jump
DevTools → Lighthouse → analyze page load → CLS < 0.1 after opening the pair menu
With stack up: cd frontend-dapp && npm run test:e2e -- e2e/trade-pair-select-cls.spec.ts --workers=1

@totdking — please verify on your M1 / Chrome 148 setup (W13-C2). Leaving the issue open until sign-off.

## Fix landed on `main` (e07b253) **Summary:** Opening `#trade-pair-select` on `/trade` no longer shifts surrounding layout. CLS drivers addressed: synchronous fixed portal positioning on first open frame, reserved focus-ring footprint on `.token-select-trigger`, `.token-select-root` layout containment, `scrollbar-gutter: stable` on `html`, and trade pair shell `shrink-0`. **Code:** `portalListboxPosition.ts`, `PortalListbox.tsx`, `MenuSelect`/`TokenSelect` wrappers, `index.css`, `TradePage.tsx`. **Docs / agent playbooks:** [docs/frontend.md § Portal listboxes — layout stability](docs/frontend.md#portal-listbox-layout-stability), [`skills/AGENTS_FRONTEND_PORTAL_LISTBOX_CLS.md`](skills/AGENTS_FRONTEND_PORTAL_LISTBOX_CLS.md) (cross-linked from trade layout + a11y focus skills). **Automated checks (527 unit tests passed locally):** `portalListboxPosition.test.ts`; Playwright `e2e/trade-pair-select-cls.spec.ts` (needs LocalTerra + LCD + indexer). --- ### Verification checklist - [ ] `git pull` → `main` at **e07b253** or later - [ ] `VITE_NETWORK=local npm run dev` → open `/trade` at ~1440px desktop - [ ] Click **Pair** (`#trade-pair-select`) — chart, order book, and ticket columns do **not** jump - [ ] DevTools → **Lighthouse** → analyze page load → **CLS < 0.1** after opening the pair menu - [ ] With stack up: `cd frontend-dapp && npm run test:e2e -- e2e/trade-pair-select-cls.spec.ts --workers=1` @totdking — please verify on your M1 / Chrome 148 setup (W13-C2). Leaving the issue **open** until sign-off.

PlasticDigits commented

2026-05-22 06:16:27 +00:00

(Migrated from gitlab.com)

mentioned in issue #179

Brouie commented

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

(Migrated from gitlab.com)

qa cleared source+test layer @PlasticDigits

verified e07b253 is on main.

portalListboxPosition.test.ts 3/3 PASS (computePortalListboxStyle: opens below, flips above when tight, clamps horizontally inside viewport).

Browser walk + Lighthouse CLS + Playwright e2e deferred to @totdking on his M1 / Chrome 148 setup per your note above.

qa cleared source+test layer @PlasticDigits verified `e07b253` is on main. portalListboxPosition.test.ts 3/3 PASS (computePortalListboxStyle: opens below, flips above when tight, clamps horizontally inside viewport). Browser walk + Lighthouse CLS + Playwright e2e deferred to @totdking on his M1 / Chrome 148 setup per your note above.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-25 11:10:40 +00:00

PlasticDigits commented

2026-05-27 02:58:29 +00:00

(Migrated from gitlab.com)

mentioned in issue #144