klinux / klinux/gocdnext

fix(web): repair Environment select in Freeze dialog

Open
#248 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

good first issue
Dominant language
Go
Stars
7
Forks
3
Avg merge
2h 12m
Merged PRs (30d)
30

Description

Context

The page-level Freeze an environment dialog has a broken Environment dropdown/suggestion UI.

From the reported screenshot, opening the Environment control renders a menu that is visually off-token and misaligned inside the dialog:

  • popup background/color does not match the dialog/select theme
  • menu width/position is awkward relative to the trigger
  • popup overlaps the helper text/next field area in a rough way
  • it looks like the select/datalist/shadcn configuration is incomplete

This is especially visible in dark theme.

Important Product Constraint

The page-level freeze flow must continue to allow free-text environment names.

Environments are created lazily after the first deploy, so freezing pre-emptively must support names that are not in the existing environment list yet. Existing environments should be suggestions, not a hard constraint, unless we intentionally design a combobox/custom-value flow.

Likely Area

  • web/components/environments/freeze-dialog.client.tsx
  • web/components/environments/freeze-dialog.test.tsx
  • possibly web/components/ui/select.tsx if this is a shared shadcn/base-ui Select configuration issue

The component currently has prior context around avoiding Select inside Dialog because of a base-ui stack crash. If we switch to shadcn/base-ui Select or Combobox here, verify that the dialog/popover interaction is safe.

Acceptance Criteria

  • Environment suggestions in the Freeze dialog render with correct app tokens in dark and light themes.
  • Popup is aligned to the trigger, has sane width, and appears above the dialog content without visual clipping or odd overlap.
  • Keyboard behavior works: focus, arrow navigation, Enter/select, Escape/close, Tab order.
  • Free-text submission still works for an environment name that is not in the suggestion list.
  • Per-card freeze mode remains unchanged: fixed environment, no editable Environment control.
  • No extra backend fetch is added on type/open; reuse environments already available to the page where possible.
  • Add/update tests covering:
    • suggestions render/open in the page-level Freeze dialog
    • selecting an existing environment works
    • typing and submitting a new environment name still works
    • dialog remains mounted/usable after the suggestion popup closes

Notes

Reported from Screenshot_20260809_121026.png: the Environment dropdown in the Freeze modal appears visually broken.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in web/components/environments/freeze-dialog.client.tsx and read web/components/environments/freeze-dialog.test.tsx; reproduce the page-level Freeze dialog behavior in both themes and review web/components/ui/select.tsx if the shared configuration is involved. Done means aligned, keyboard-usable suggestions, working existing and free-text environment submission, unchanged per-card mode, and tests covering popup closing and dialog usability.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript
Domain
frontend, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.