fix(orchestration): contain the recipe picker dropdown + align its label - #27
Merged
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
SelectValuemirrored the menu item's two-line name + long description, and the trigger iswhitespace-nowrap. The description's min-content (~730px) blew the field out, and CSS gridmin-width:autothen 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
SelectContentdefaults toposition="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):
role="combobox"+ addedaria-label="Recipe".vitest(DirectorTypePicker) ·typecheck·electron-vite build·oxlint·oxfmtall green.🤖 Generated with Claude Code