crueber/walhub

Watch

Fork 0

Pull-new branch dropdown is transparent: page text shows through under the options #236

New issue

Closed

opened 2026-09-09 15:17:53 +00:00 by crueber · 3 comments

crueber commented

2026-09-09 15:17:53 +00:00

Owner

What's wrong

On the open-a-pull-request page (/:owner/:name/pulls/new), the head/base branch dropdown renders as a transparent panel — the page content underneath it shows through and overlaps the option text, making the picker hard to read.

Root cause (code evidence)

The dropdown in web/src/pages/PullNew.jsx:82 uses:

<ul class="ref-list absolute z-10 max-h-48 w-full overflow-y-auto" role="listbox">

The only stylesheet rule for .ref-list is web/css/repo.css:81:

.ref-list { display: flex; flex-direction: column; max-height: 300px; overflow: auto; }

It has no background, border, box-shadow, or opaque color — it's a floating absolute panel over the page, so everything beneath bleeds through. The properly styled dropdown class in the same file, .ref-drop (repo.css:74-78), has exactly what's missing: background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px ….

The option rows have the same problem: ref-item (PullNew.jsx:88) has no CSS rule anywhere in the repo, while the styled equivalent .ref-row (repo.css:82-86) does — with background: none it would still be transparent even if the panel weren't.

Note this affects both pickers on the page (head and base use the same RefSelect component, PullNew.jsx:34-105). The identical dropdown markup in web/src/pages/Pull.jsx:218 (ref-list absolute z-10 … for the reviewer picker) almost certainly has the same transparency bug — fix both.

Expected

The dropdown is an opaque panel (panel background, border, shadow — i.e. the .ref-drop treatment) and each option row is readable with a hover highlight. Nothing underneath shows through, in both light and dark themes.

Acceptance criteria

Head/base dropdowns on /:owner/:name/pulls/new render as opaque panels: var(--panel) background, border, shadow, readable in light and dark themes.
Option rows have a visible hover/active highlight (.ref-row-equivalent styling for .ref-item).
The reviewer-picker dropdown in web/src/pages/Pull.jsx:218 gets the same fix.
Dropdown still scrolls (max-height + overflow) and the z-index still stacks it above page content — no regressions to the existing behavior.

## What's wrong On the open-a-pull-request page (`/:owner/:name/pulls/new`), the head/base branch dropdown renders as a transparent panel — the page content underneath it shows through and overlaps the option text, making the picker hard to read. ## Root cause (code evidence) The dropdown in `web/src/pages/PullNew.jsx:82` uses: ``` <ul class="ref-list absolute z-10 max-h-48 w-full overflow-y-auto" role="listbox"> ``` The only stylesheet rule for `.ref-list` is `web/css/repo.css:81`: ``` .ref-list { display: flex; flex-direction: column; max-height: 300px; overflow: auto; } ``` It has **no background, border, box-shadow, or opaque color** — it's a floating `absolute` panel over the page, so everything beneath bleeds through. The properly styled dropdown class in the same file, `.ref-drop` (repo.css:74-78), has exactly what's missing: `background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px …`. The option rows have the same problem: `ref-item` (PullNew.jsx:88) has no CSS rule anywhere in the repo, while the styled equivalent `.ref-row` (repo.css:82-86) does — with `background: none` it would still be transparent even if the panel weren't. Note this affects both pickers on the page (head and base use the same `RefSelect` component, PullNew.jsx:34-105). The identical dropdown markup in `web/src/pages/Pull.jsx:218` (`ref-list absolute z-10 …` for the reviewer picker) almost certainly has the same transparency bug — fix both. ## Expected The dropdown is an opaque panel (panel background, border, shadow — i.e. the `.ref-drop` treatment) and each option row is readable with a hover highlight. Nothing underneath shows through, in both light and dark themes. ## Acceptance criteria - [ ] Head/base dropdowns on `/:owner/:name/pulls/new` render as opaque panels: `var(--panel)` background, border, shadow, readable in light and dark themes. - [ ] Option rows have a visible hover/active highlight (`.ref-row`-equivalent styling for `.ref-item`). - [ ] The reviewer-picker dropdown in `web/src/pages/Pull.jsx:218` gets the same fix. - [ ] Dropdown still scrolls (max-height + overflow) and the z-index still stacks it above page content — no regressions to the existing behavior.

crueber referenced this issue from a commit

2026-09-09 17:41:15 +00:00

Fix #236: opaque branch/reviewer picker dropdowns via shared popover classes

crueber referenced this issue from a pull request that will close it,

2026-09-09 17:41:21 +00:00

Fix #236: opaque branch picker dropdowns #245

crueber commented

2026-09-09 17:41:24 +00:00

Author

Owner

Fixed by #245 (branch fix/issue-236): both dropdowns now wire the shared #115 opaque-popover classes (ref-drop card) with hover-highlighted rows, dark + light, no new CSS. node --test 460/460 green, vite build clean. Not merged — awaiting review.

crueber commented

2026-09-09 18:10:46 +00:00

Author

Owner

Review of PR #245 (fix/issue-236, opaque branch picker dropdowns):

WIRING (both pickers on the shared #115 opaque pattern):

web/src/pages/PullNew.jsx:82 — head/base dropdown now ref-list ref-drop card scroll-slim absolute z-10 mt-1 max-h-48 w-full overflow-y-auto p-1 shadow-lg. Opaque core ref-drop card matches the Repo.jsx:282 picker; layout deltas (ul vs div, w-full/z-10/mt-1/p-1/shadow-lg vs w-80/z-30/mt-2/p-2) are correct for an inline under-input list. Scroll (scroll-slim max-h-48 overflow-y-auto) + stacking (absolute z-10) preserved.
web/src/pages/Pull.jsx:218 — reviewer dropdown gets the identical panel classes. Same verdict.
Rows (PullNew.jsx:87, Pull.jsx:222): keep the ref-item hook, add explicit text-zinc-800 dark:text-zinc-200 + hover:bg-zinc-100 dark:hover:bg-zinc-800 — readable + hover-highlighted in both themes (explicit text color is arguably better than Repo.jsx:307 rows, which inherit).

CONSTRAINTS (AGENTS.md laws 1/8/12):

No new CSS: diff is exactly Pull.jsx + PullNew.jsx + new test; git diff main...origin/fix/issue-236 --name-only confirms zero .css/package.json changes. Dead web/css/repo.css untouched (correct, out of scope).
No new deps: runtime set unchanged (solid-js + @solidjs/router + marked + dompurify).
No doc amendment needed: pure class-wire fix reusing the frozen #115 popover contract, no behavior/shape change.

TEST:

New web/test/unit/pull-dropdown-opaque.test.js: 5/5 pass — pins opaque panel classes on both dropdowns, row readability/hover both themes, no bare ref-list absolute remaining, behavior unchanged (150ms debounce, refStream/suggest, pick-to-close), live-stylesheet wiring (ui.css imports + .ref-drop opaque rule).
Full suite in scratch worktree: 460 tests, 460 pass, 0 fail.
vite build succeeds; compiled CSS contains the opaque rule: .ref-drop,...{background-color:white} + dark .dark{zinc-900} variant. (One env note: an early full-suite run showed ERR_MODULE_NOT_FOUND for marked — artifact of running before web/node_modules was linked in scratch, not a PR issue; clean re-run is green.)
No browser drive per review instructions (node tests + compiled-CSS reasoning only) — noted explicitly.

No fixes needed; nothing pushed. MERGE RECOMMENDATION: ready to merge.

Review of PR #245 (fix/issue-236, opaque branch picker dropdowns): WIRING (both pickers on the shared #115 opaque pattern): - web/src/pages/PullNew.jsx:82 — head/base dropdown now `ref-list ref-drop card scroll-slim absolute z-10 mt-1 max-h-48 w-full overflow-y-auto p-1 shadow-lg`. Opaque core `ref-drop card` matches the Repo.jsx:282 picker; layout deltas (ul vs div, w-full/z-10/mt-1/p-1/shadow-lg vs w-80/z-30/mt-2/p-2) are correct for an inline under-input list. Scroll (`scroll-slim max-h-48 overflow-y-auto`) + stacking (`absolute z-10`) preserved. - web/src/pages/Pull.jsx:218 — reviewer dropdown gets the identical panel classes. Same verdict. - Rows (PullNew.jsx:87, Pull.jsx:222): keep the `ref-item` hook, add explicit `text-zinc-800 dark:text-zinc-200` + `hover:bg-zinc-100 dark:hover:bg-zinc-800` — readable + hover-highlighted in both themes (explicit text color is arguably better than Repo.jsx:307 rows, which inherit). CONSTRAINTS (AGENTS.md laws 1/8/12): - No new CSS: diff is exactly Pull.jsx + PullNew.jsx + new test; `git diff main...origin/fix/issue-236 --name-only` confirms zero .css/package.json changes. Dead web/css/repo.css untouched (correct, out of scope). - No new deps: runtime set unchanged (solid-js + @solidjs/router + marked + dompurify). - No doc amendment needed: pure class-wire fix reusing the frozen #115 popover contract, no behavior/shape change. TEST: - New web/test/unit/pull-dropdown-opaque.test.js: 5/5 pass — pins opaque panel classes on both dropdowns, row readability/hover both themes, no bare `ref-list absolute` remaining, behavior unchanged (150ms debounce, refStream/suggest, pick-to-close), live-stylesheet wiring (ui.css imports + .ref-drop opaque rule). - Full suite in scratch worktree: 460 tests, 460 pass, 0 fail. - `vite build` succeeds; compiled CSS contains the opaque rule: `.ref-drop,...{background-color:white}` + dark `.dark{zinc-900}` variant. (One env note: an early full-suite run showed ERR_MODULE_NOT_FOUND for marked — artifact of running before web/node_modules was linked in scratch, not a PR issue; clean re-run is green.) - No browser drive per review instructions (node tests + compiled-CSS reasoning only) — noted explicitly. No fixes needed; nothing pushed. MERGE RECOMMENDATION: ready to merge.

crueber closed this issue

2026-09-09 18:11:51 +00:00

crueber referenced this issue from a commit

2026-09-09 18:11:51 +00:00

Merge pull request 'Fix #236: opaque branch picker dropdowns' (#245) from fix/issue-236 into main

crueber commented

2026-09-09 18:11:51 +00:00

Author

Owner

Fixed by PR #245 (review clean; both pickers on the shared opaque pattern; 460/460), merged. Closing.

crueber referenced this issue

2026-09-10 13:32:49 +00:00