Skip to content

fix(orchestration): contain the recipe picker dropdown + align its label - #27

Merged
zaridan merged 1 commit into
mainfrom
zaridan/fix-orch-picker-modal-layout
Jun 24, 2026
Merged

fix(orchestration): contain the recipe picker dropdown + align its label#27
zaridan merged 1 commit into
mainfrom
zaridan/fix-orch-picker-modal-layout

Conversation

@zaridan

@zaridan zaridan commented Jun 24, 2026

Copy link
Copy Markdown
Owner

Summary

Fixes two layout bugs in the New Orcastrator modal's Recipe director picker (DirectorTypePicker), both observed during live verification of the merged picker (#11). Layout/containment only — no behavior change.

1. Recipe field overflowed the modal

The trigger's SelectValue mirrored the menu item's two-line name + long description, and the trigger is whitespace-nowrap. The description's min-content (~730px) blew the field out, and CSS grid min-width:auto then stretched the entire dialog content to ~780px while the modal is only 512px wide — everything (title, labels, fields) spilled ~290px past the right edge.

Fix: the trigger now shows only the selected recipe name (single line); the description stays in the dropdown — mirroring the Project combobox above it.

2. Open menu spilled past the modal and over Cancel/Launch

shadcn's SelectContent defaults to position="item-aligned", which is unbounded and centered over the trigger, so the open menu escaped the dialog horizontally and covered the button row.

Fix: position="popper" + align="start" + width pinned to the trigger (w-[var(--radix-select-trigger-width)]), so the menu stays at field width, within the modal, and is collision-aware — again matching the Project dropdown.

Note on the "clipped Recipe label"

The reported "Recipe label clipped at the modal's left edge" was a symptom of the blown-out layout, not a separate label bug — the Recipe field was already structurally identical to the Project field. With the overflow gone, all field labels line up (verified left-aligned at the same x).

Verification

Verified live in the running dev build by measuring the actual DOM via the Electron renderer's DevTools/CDP endpoint (Screen Recording was unavailable for screenshots):

  • Before: dialog 512px, but form content 781px (overflowing to x=1205); open menu 832px spilling past the modal and footer.
  • After: 0 nodes overflow the dialog; trigger 462px (name-only) within bounds; open menu 462px = trigger width, contained at 424→886 ⊂ dialog 399→911; Project / Recipe / Name labels all at left=424; dropdown still lists all recipes with descriptions and selection works; trigger keeps role="combobox" + added aria-label="Recipe".

vitest (DirectorTypePicker) · typecheck · electron-vite build · oxlint · oxfmt all green.

🤖 Generated with Claude Code

Two layout bugs in the New Orcastrator modal's Recipe director picker,
found via live verification of #11:

1. The recipe field — and through it the whole dialog grid — overflowed far
   past the modal's right edge. The trigger's `SelectValue` mirrored the
   menu's two-line name+description, which is `whitespace-nowrap` in the
   trigger; its min-content (~730px) blew the field out, and grid
   `min-width:auto` stretched the entire dialog content to ~780px (the modal
   is 512px). Fixed by showing only the recipe NAME in the trigger (the
   description stays in the menu), mirroring the Project combobox.

2. The open menu spilled past the modal and over the Cancel/Launch row
   because shadcn's default `position="item-aligned"` is unbounded. Switched
   to `position="popper"` + `align="start"` + width pinned to the trigger
   (`w-[var(--radix-select-trigger-width)]`) so it stays within the field and
   is collision-aware — again matching the Project dropdown.

The "Recipe label clipped at the left edge" report was a symptom of the
blown-out layout: with the overflow gone, all field labels line up (verified
left-aligned at the same x via the live renderer).

Layout/containment only — selection behavior is unchanged (same
value/onValueChange wiring); added an `aria-label` to the trigger to keep its
accessible name now that `SelectValue` is gone.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zaridan
zaridan merged commit 665d77f into main Jun 24, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant