code/cl8y-dex-terraclassic

Fork 0

Bug: Native select dropdowns overlap content on mobile/tablet viewports #47

New issue

Closed

opened 2026-03-27 10:46:24 +00:00 by Brouie · 8 comments

Brouie commented

2026-03-27 10:46:24 +00:00

(Migrated from gitlab.com)

Native select dropdowns (Sort, Order) overlap content below them when opened across most mobile and tablet viewports.

Affected pages: Pool, Charts (any page with Sort/Order selects)

Affected viewports:

iPhone 14 Pro Max (430x932)
Samsung Galaxy S20 Ultra
Samsung Galaxy A51/A71
Galaxy Fold 5
iPad Mini (768x1024)
iPad Air (820x1180)
iPad Pro (1024x1366)

NOT affected:

iPhone SE (375x667) — dropdowns render normally
Desktop — fine

The native select dropdown renders on top of the content below instead of floating above it. Likely needs z-index fix or absolute positioning on the dropdown container.

Native select dropdowns (Sort, Order) overlap content below them when opened across most mobile and tablet viewports. Affected pages: Pool, Charts (any page with Sort/Order selects) Affected viewports: - iPhone 14 Pro Max (430x932) - Samsung Galaxy S20 Ultra - Samsung Galaxy A51/A71 - Galaxy Fold 5 - iPad Mini (768x1024) - iPad Air (820x1180) - iPad Pro (1024x1366) NOT affected: - iPhone SE (375x667) — dropdowns render normally - Desktop — fine The native select dropdown renders on top of the content below instead of floating above it. Likely needs z-index fix or absolute positioning on the dropdown container.

Brouie commented

2026-03-27 10:49:47 +00:00

(Migrated from gitlab.com)

mentioned in issue #44

PlasticDigits commented

2026-03-28 09:41:17 +00:00

(Migrated from gitlab.com)

mentioned in commit e5b8ff22c0

mentioned in commit e5b8ff22c0edc569642c606c0230c89dc5c3eca1

PlasticDigits commented

2026-03-28 09:41:25 +00:00

(Migrated from gitlab.com)

Fix implemented (commit `e5b8ff2`)

Cause: Filter panels use .shell-panel with backdrop-filter, which creates a compositing/stacking context. Pool rows below use shell-panel-strong / card-neo with their own blur layers. On many mobile and tablet engines the native <select> menu is composited with the earlier panel, while following siblings paint on top, so the open picker looked wrong (overlapped / covered by content below).

Change: Added .shell-panel-native-select-host (position: relative; z-index: 20) in frontend-dapp/src/index.css, and applied it to the Pool filter bar and the Charts pair-selector panel so those hosts stack above the list content while staying below the sticky header (z-40) and bottom mobile nav (z-50).

Verify: Pool (/pool) and Charts (/charts) — open Sort, Order, and pair selects on the viewports listed in the issue.

/cc @brouie Could you QA on device or responsive devtools and confirm? Leaving this issue open until verified.

## Fix implemented (commit e5b8ff2) **Cause:** Filter panels use `.shell-panel` with `backdrop-filter`, which creates a compositing/stacking context. Pool rows below use `shell-panel-strong` / `card-neo` with their own blur layers. On many mobile and tablet engines the native `<select>` menu is composited with the earlier panel, while following siblings paint **on top**, so the open picker looked wrong (overlapped / covered by content below). **Change:** Added `.shell-panel-native-select-host` (`position: relative`; `z-index: 20`) in `frontend-dapp/src/index.css`, and applied it to the Pool filter bar and the Charts pair-selector panel so those hosts stack above the list content while staying below the sticky header (z-40) and bottom mobile nav (z-50). **Verify:** Pool (`/pool`) and Charts (`/charts`) — open Sort, Order, and pair selects on the viewports listed in the issue. /cc @brouie Could you QA on device or responsive devtools and confirm? Leaving this issue **open** until verified.

PlasticDigits commented

2026-03-28 09:45:49 +00:00

(Migrated from gitlab.com)

mentioned in commit d0b9a7544f

mentioned in commit d0b9a7544f539dede48b106c640f4216f73a97cd

PlasticDigits commented

2026-03-28 09:45:57 +00:00

(Migrated from gitlab.com)

Implementation (mobile/tablet native select overlap)

Cause: Native <select> menus on many mobile/tablet WebKit/Chromium builds composite in a stacking context where blurred panels and cards below can paint over the open picker (as in your report).

Change: Added MenuSelect (frontend-dapp/src/components/ui/MenuSelect.tsx) — a button-triggered listbox that reuses the same fixed-position + createPortal(..., document.body) approach and token-select-* styles as TokenSelect, so the menu always layers above page content (z-index on .token-select-dropdown).

Wired up: Pool page Sort/Order and Charts page Sort/Order/Select pair now use MenuSelect instead of native selects. Removed the temporary .shell-panel-native-select-host z-index workaround since it is no longer needed for those controls.

Verification: npm run build and npm run lint pass on the frontend. Pool Playwright specs were flaky here (indexer / env), not specific to this UI.

Commit: d0b9a75 on main.

@brouie Could you QA on the viewports you listed (iPhone 14 Pro Max, Galaxy family, iPad sizes) and confirm the menus no longer sit under the content below? Leaving this issue open until you sign off.

## Implementation (mobile/tablet native select overlap) **Cause:** Native `<select>` menus on many mobile/tablet WebKit/Chromium builds composite in a stacking context where blurred panels and cards below can paint over the open picker (as in your report). **Change:** Added `MenuSelect` (`frontend-dapp/src/components/ui/MenuSelect.tsx`) — a button-triggered listbox that reuses the same **fixed-position + `createPortal(..., document.body)`** approach and `token-select-*` styles as `TokenSelect`, so the menu always layers above page content (`z-index` on `.token-select-dropdown`). **Wired up:** Pool page Sort/Order and Charts page Sort/Order/Select pair now use `MenuSelect` instead of native selects. Removed the temporary `.shell-panel-native-select-host` z-index workaround since it is no longer needed for those controls. **Verification:** `npm run build` and `npm run lint` pass on the frontend. Pool Playwright specs were flaky here (indexer / env), not specific to this UI. **Commit:** `d0b9a75` on `main`. @brouie Could you QA on the viewports you listed (iPhone 14 Pro Max, Galaxy family, iPad sizes) and confirm the menus no longer sit under the content below? Leaving this issue **open** until you sign off.

PlasticDigits commented

2026-03-30 04:13:27 +00:00

(Migrated from gitlab.com)

mentioned in commit 143f5325c5

mentioned in commit 143f5325c5080d250d0f315bbcd3d3b88851748f

PlasticDigits commented

2026-03-30 04:13:34 +00:00

(Migrated from gitlab.com)

@brouie Please verify on your listed viewports: shared usePortalListbox for MenuSelect/TokenSelect (flip-above + clamp, z-index 200). Commit 143f532. Leaving open until you sign off.

@brouie Please verify on your listed viewports: shared `usePortalListbox` for MenuSelect/TokenSelect (flip-above + clamp, z-index 200). Commit 143f532. Leaving open until you sign off.

Brouie commented

2026-03-30 04:45:34 +00:00

(Migrated from gitlab.com)

Verified fixed on 2a09e75. New MenuSelect component replaces native select dropdowns. No overlap on mobile/tablet viewports (iPhone 14 Pro Max, Samsung Galaxy). Pool and Charts pages tested.

Verified fixed on 2a09e75. New MenuSelect component replaces native select dropdowns. No overlap on mobile/tablet viewports (iPhone 14 Pro Max, Samsung Galaxy). Pool and Charts pages tested.

Brouie (Migrated from gitlab.com) closed this issue

2026-03-30 04:45:35 +00:00