Skip to content

Fix the Builder launcher's broken layout and unstyled controls - #310

Merged
dovvnloading merged 1 commit into
mainfrom
builder-launcher-polish
Aug 10, 2026
Merged

Fix the Builder launcher's broken layout and unstyled controls#310
dovvnloading merged 1 commit into
mainfrom
builder-launcher-polish

Conversation

@dovvnloading

Copy link
Copy Markdown
Owner

Problem

The Builder dialog's form rendered as a single inline run: the Recipe label, its <select>, and the goal label all shared one line before the full-width <textarea> wrapped, and the panel stretched toward its 880px max as a result.

Root cause: <Dialog>'s className lands on the panel (.overlay-dialog), never on the body. So .builder-launch-dialog { display: flex; flex-direction: column } only ever spaced the header away from the body, while .overlay-dialog-body stayed a plain block full of inline-level children.

Separately, the three budget inputs had no styling beyond width: 110px, so they rendered as default-white browser fields inside a dark dialog; the fieldsets and radios were likewise raw browser defaults.

Change

  • Scoped the form layout to .overlay-dialog-body, the way .settings-dialog / .help-dialog / .library-dialog already do, and pinned the dialog to 540px.
  • All three control kinds (select, textarea, number) now share one themed box matching .settings-select's existing treatment; fieldsets match .settings-fieldset; radios get accent-color.
  • Oversight radios are now whole-row targets with a title and description rather than one flat sentence, and the chosen row is visibly marked.
  • The autopilot disclosure is a bordered callout instead of loose orange text — it is a real "this will act without asking" warning.
  • listRecipes has always returned each recipe's description and nothing ever rendered it, so the picker gave no clue what a recipe builds. The selected recipe's description now shows under the picker.
  • The start button spent its whole default state disabled while looking identical to enabled — it now dims.

No behavior change to builder/start: the same args, in the same order, with the same enable/disable rule.

Test plan

  • BuilderLaunchDialog.test.tsx — 8 passed, including two new tests (selected-row marking; recipe description rendering). The 6 pre-existing tests were not modified.
  • Full frontend suite: 1845 passed across 77 files.
  • npx tsc --noEmit -p . — clean.
  • npx eslint . — 0 errors.
  • Verified in a live browser against the real backend via DOM geometry: the dialog body computes flex/column, the four fields sit at distinct offsets each at full width (previously three shared one row), and the number inputs compute rgb(32,32,32) with light text instead of default white.

Note: the selected-row highlight could not be confirmed visually — the browser pane runs hidden here and does not recompute styles for dynamically toggled classes, so that state is covered by the new test instead.

The dialog's form was laid out as a single inline run: the Recipe label,
its <select>, and the goal label all shared one line before the
full-width <textarea> wrapped, and the panel stretched toward its 880px
max as a result. Root cause: <Dialog>'s `className` lands on the PANEL
(.overlay-dialog), never on the body, so `.builder-launch-dialog`'s
column layout only ever spaced the header away from the body while
.overlay-dialog-body stayed a plain block full of inline-level children.
Scoped the layout to .overlay-dialog-body the way .settings-dialog /
.help-dialog / .library-dialog already do, and pinned the dialog to a
540px width.

The three budget inputs had no styling beyond `width: 110px`, so they
rendered as default-white browser fields inside a dark dialog; the
fieldsets and radios were likewise raw browser defaults. All controls now
share one themed box (matching .settings-select's own treatment), the
fieldsets match .settings-fieldset, and the radios get accent-color.

Also, while in here:
- The oversight radios are now whole-row targets with a title and a
  description rather than one flat sentence, and the chosen row is
  visibly marked.
- The autopilot disclosure is a bordered callout instead of loose orange
  text - it is a real "this will act without asking" warning.
- listRecipes has always returned each recipe's `description` and nothing
  ever rendered it, so the picker gave no clue what a recipe builds; the
  selected recipe's description now shows under the picker.
- The start button spent its whole default state disabled while looking
  identical to enabled - it now dims.

Adds tests for the selected-row marking and the recipe description.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@dovvnloading
dovvnloading merged commit 3f078fd into main Aug 10, 2026
3 checks passed
@dovvnloading
dovvnloading deleted the builder-launcher-polish branch August 10, 2026 21:55
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