Lay out the model dialog in two panes with narrow price inputs - #181
Merged
Merged
Conversation
The one-column model dialog was taller than a laptop window, and each price input was half the dialog wide, far wider than any rate. Of three mockups, the operator chose two panes. - The dialog is 880px wide. The model and its API settings are on the left; the prices are in their own shaded pane on the right. - Each price is one row: the type's name, a star when it is required, a 110px right-aligned input, and "not billed" under it. The input's own name still reads "Input rate $ / 1M tokens, required". - A self-hosted model shows a note in the prices pane instead. - Below 760px the prices pane moves under the model. - The subgrid that lined up the old two-column price fields is removed.
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
1 participant
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.
Why
Operator feedback (2026-09-27) on the Add model dialog after #180: still too long, and the price inputs are far wider than a rate needs. Of three mockups (A price table, B two panes, C price strip), the operator chose B.
What changed
SettingsLlmModelForm:.modal.tall.model-dialog(880px). A.model-panesgrid: the left pane holds type, name, label, self-hosted and the API parameters; the right pane (<section aria-label="Prices">) holds the prices, or a note for a self-hosted model.SettingsLlmModelRateFields: each rate is a.price-item. It has a<label htmlFor>with the type's name and a star for a required type, a 110px right-aligned input, and the "not billed" box under it. The input keeps an accessible name that starts with " rate $ / 1M tokens", so the existing tests and a screen reader still read the full meaning..rate-grid,.rate-field,.rate-label) are removed; nothing else used them.llmDialogs.contract.test.tsnow holds the width, both grids, the stacking breakpoint and the markup.Verification
index.cssat 1366×768, about 500px tall with no scrolling. Narrow widths were not checked in a browser.tscand the production build pass.model-dialogclass, the panes markup, the rate input's accessible name). Each fails a test. A first try at the panes-grid mutant hit.grid2(same text) and was re-run on the unique line.