dd7fc1c9af
The refusal sat inside the collapsed section, and the general error panel hides while a refusal is set, so a refused submit with the section closed showed nothing. The refusal now renders under the section, outside the details element.
81 lines
2.8 KiB
CSS
81 lines
2.8 KiB
CSS
/* <CreateAgentForm> — the create-agent form, rendered inside a `Dialog`
|
|
from `AgentsPage` (see that component's file-top comment for why).
|
|
Input/button chrome comes from the shared `ui/` form kit
|
|
(`TextField`/`SelectField`/`Button`); this file only owns this
|
|
component's own layout + copy. Column,
|
|
not row inside the form itself: with a second field (hive) added, a
|
|
row layout put fields of different natural widths on one baseline and
|
|
looked misaligned — mara: "make it a col". Reuses the same base16
|
|
slots (../theme.css) every other component draws from.
|
|
|
|
This layout dropped an explicit page `max-width` after a few rounds:
|
|
first added so bare `Panel` (no width opinion of its own) wouldn't
|
|
fill `.shell-body`'s full 60em column behind a narrow form (the
|
|
original "weird empty space" complaint), then widened for two panels
|
|
side by side — but once both were equal-width flex children that cap
|
|
itself became "doesn't fill the space" (mara: "the cards are neither
|
|
centered nor fill the space tho"). Removing it lets the row fill
|
|
`.shell-body`'s own width like most pages — nothing sits off-center
|
|
once nothing is narrower than the row.
|
|
|
|
`.create-agent-form-col`/`.create-agent-info-col` are equal-sized
|
|
(`flex: 1 1 0` — zero basis so the 1.5em `gap` splits the row evenly,
|
|
not each column keeping its natural content width) per mara's "both
|
|
cards should be equal sized". `min-width` is the wrap threshold below
|
|
which the row goes single-column instead (info card moving under the
|
|
form) — no separate media query needed. Inputs fill their whole
|
|
column now too ("inputs should fill full card width") — the kit's
|
|
`.ui-form-control`/`.ui-form-field` dropped their old 16em cap for
|
|
exactly this (../ui/form-field/FormField.css). */
|
|
.create-agent-layout {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
gap: 1.5em;
|
|
}
|
|
.create-agent-form-col,
|
|
.create-agent-info-col {
|
|
flex: 1 1 0;
|
|
min-width: 16em;
|
|
}
|
|
.create-agent-intro {
|
|
margin: 0 0 1.5em;
|
|
color: var(--muted);
|
|
}
|
|
.create-agent-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.75em;
|
|
}
|
|
/* Optional settings, collapsed so the plain name-and-hive form stays short. */
|
|
.create-agent-section {
|
|
align-self: stretch;
|
|
}
|
|
.create-agent-section > summary {
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
}
|
|
.create-agent-section-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.75em;
|
|
margin-top: 0.75em;
|
|
}
|
|
.create-agent-result {
|
|
margin-top: 1em;
|
|
}
|
|
.create-agent-result-ok {
|
|
color: var(--green);
|
|
}
|
|
/* The controller's refusal of the AGENTS.md text, under its section. */
|
|
.create-agent-field-error {
|
|
margin: 0;
|
|
color: var(--red);
|
|
}
|
|
/* The picked archetype's description, under its select. */
|
|
.create-agent-archetype-description {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|