@w6w/ui 0.0.0-stage → 0.1.1

package/src/styles/_step-builder.scss

@@ -0,0 +1,376 @@
+.w6w-step-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  /* lint-tokens-allow: relative em, not absolute rem like the scale's --w6w-fs- type tokens — mirrors the accepted _modal.scss:88 .w6w-modal-subtitle precedent; .w6w-step-meta currently has zero .tsx call sites (possible dead CSS, not this task's to delete) */
+  font-size: 0.8em;
+  color: var(--w6w-muted);
+}
+.w6w-step-meta code {
+  color: var(--w6w-text);
+}
+
+/* Step builder (sidebar + content) */
+.w6w-stepbuilder {
+  display: flex;
+  gap: var(--w6w-sp-4);
+  min-height: 340px;
+}
+.w6w-stepbuilder-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  width: 140px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--w6w-border);
+  padding-right: var(--w6w-sp-3);
+}
+.w6w-stepbuilder-tab {
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+.w6w-stepbuilder-tab:hover {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+}
+.w6w-stepbuilder-tab.active {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+  font-weight: var(--w6w-fw-medium);
+}
+.w6w-stepbuilder-content {
+  flex: 1;
+  min-width: 0;
+  /* Fixed height (not content-driven) so the modal never resizes when toggling
+     tabs, and the sidebar divider — which stretches to this row — stays a
+     constant length regardless of the right pane's content. */
+  height: min(70vh, 520px);
+  overflow: auto;
+}
+/* Apps flow: a fixed search header + a separately scrolling list, so the
+   scrollbar is contained to the list and never runs alongside the search. */
+.w6w-stepbuilder-apps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+  height: 100%;
+  min-height: 0;
+}
+.w6w-stepbuilder-scroll {
+  overflow-y: auto;
+  /* Fill the remaining height below the search header; the list — not the
+     outer modal content — owns the scrollbar. */
+  flex: 1;
+  min-height: 0;
+  padding-right: var(--w6w-sp-1);
+}
+.w6w-stepbuilder-search {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+  width: 100%;
+}
+.w6w-stepbuilder-search:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+.w6w-stepbuilder-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+}
+.w6w-stepbuilder-item {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+  text-align: left;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  color: var(--w6w-text);
+  cursor: pointer;
+  font-size: var(--w6w-fs-sm);
+}
+.w6w-stepbuilder-item:hover {
+  border-color: var(--w6w-accent);
+}
+.w6w-stepbuilder-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+
+/* AppPicker's own multi-column card grid (T1.1.1). ADDITIVE on top of the
+   shared `.w6w-stepbuilder-list`/`-item` above, which stay byte-identical to
+   `main` (NodeList/CallableRow/ReadyToUseFlow still consume them unmodified)
+   — this rule wins the cascade purely by being declared later at equal
+   (single-class) specificity. `minmax(190px, 1fr)` is re-derived for this
+   card's much shorter content (icon + name + id + version, not a full
+   description card) from the scale `packages/frontend`'s generic `.grid`
+   utility uses (`minmax(260px, 1fr)`) — `grid-template-columns` is box
+   geometry, outside `lint:tokens`' scanned property set, so the literal is
+   deliberate, not an oversight.
+
+   `auto-fill`, NOT `auto-fit`: the two differ in exactly one case, and it is
+   the case a search box guarantees will happen. `auto-fit` COLLAPSES the
+   tracks no card landed in, and the `1fr` then hands their width to the
+   survivors — so typing a query that matches one app blew that single card up
+   to the full width of the panel, a tile that changes size as you type. With
+   `auto-fill` the empty tracks are kept at their `minmax()` width, so a card
+   is the same size whether the grid holds 60 of them or 1.
+
+   `align-content: start` is the vertical half of the same invariant: an auto
+   row track under the default `stretch` absorbs the free space of a grid with
+   a definite height (this one's, from `.w6w-stepbuilder-scroll`'s `flex: 1`),
+   so a single result would also have grown DOWN to fill the panel. */
+.w6w-apppicker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: var(--w6w-sp-2);
+  align-content: start;
+}
+/* The quieter resting card (D-3): `--w6w-panel` at rest instead of
+   `--w6w-panel-2`, shifting TO `--w6w-panel-2` on hover/focus — the inverse
+   of the shared item's flat `--w6w-panel-2` always-on tint. No new token;
+   `.w6w-stepbuilder-item:hover`'s `border-color: var(--w6w-accent)` above
+   still applies unchanged, so hover keeps both effects together. Slightly
+   tighter padding than the shared item, sized for a narrower multi-column
+   card rather than a single full-width row.
+
+   `min-height` pins every tile to one height regardless of what it holds:
+   `version` is optional on `AppSummary`, so a catalog that mixes versioned and
+   unversioned apps would otherwise render two card heights down the same grid
+   (grid items stretch to their ROW, not to the whole grid). The floor is the
+   three-line card's own content height rounded up, so it never clips.
+
+   `align-items: flex-start` overrides the shared item's `center`: against a
+   three-line block a centred 24px icon floats beside the id rather than
+   reading as the name's own mark. */
+.w6w-apppicker-card {
+  background: var(--w6w-panel);
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  align-items: flex-start;
+  min-height: 84px;
+}
+.w6w-apppicker-card:hover,
+.w6w-apppicker-card:focus-visible {
+  background: var(--w6w-panel-2);
+}
+/* The card's two metadata lines. One `font-size` declaration for both, because
+   there is only one deliberate literal here to justify: the type ramp's
+   smallest role is `--w6w-fs-xs` (0.75rem), the id and version want to sit a
+   step UNDER it, and the ramp has no `2xs` — its 30-name key set is pinned
+   name-for-name by `scale-tokens.test.ts` and mirrored by `packages/frontend`'s
+   `check:scale-parity`, so adding one is a cross-repo contract change, not a
+   card tweak. `code`'s own UA `font-size` also has to be overridden here
+   whatever value is chosen. */
+.w6w-apppicker-card-id,
+.w6w-apppicker-card-version {
+  /* lint-tokens-allow: one step under --w6w-fs-xs; the ramp has no 2xs role and its keys are pinned */
+  font-size: 0.6875rem;
+  color: var(--w6w-muted);
+  font-family: var(--w6w-font-mono);
+}
+/* Truncation, not wrapping: `min-width: 0` on the parent
+   `.w6w-stepbuilder-item-main` is what lets this shrink below its own
+   min-content width in the first place — without it the ellipsis never
+   engages and a long id widens the flex line instead. */
+.w6w-apppicker-card-id {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.6;
+}
+/* Quieter than the name, but a step louder than the id it sits under — it is
+   the shorter, more scannable of the two. */
+.w6w-apppicker-card-version {
+  opacity: 0.75;
+}
+
+/* The opt-in category-filter chip row (D-1a; AddConnectionModal only —
+   `AppPickerProps.categoryFilter`). Extends `.w6w-chip`'s look
+   (`_multiselect.scss:40-53`) for the general shape rather than importing
+   it — that partial belongs to `ParamsForm`'s array-editor chips, a
+   different feature with the opposite interaction (only SELECTED values are
+   chips there; every available category is always a chip here). */
+.w6w-apppicker-cats {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+}
+.w6w-apppicker-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-0-5);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+.w6w-apppicker-chip:hover {
+  border-color: var(--w6w-accent);
+  color: var(--w6w-text);
+}
+/* The pressed/selected state is driven by the same `aria-pressed` the
+   button already carries for assistive tech (P10) — no separate class to
+   keep in sync with it. */
+.w6w-apppicker-chip[aria-pressed="true"] {
+  background: var(--w6w-accent);
+  border-color: var(--w6w-accent);
+  color: #fff;
+
+  /* The count's `.w6w-muted` sets its OWN color, so it doesn't inherit this
+     `color: #fff` — left alone it stays `var(--w6w-muted)`, a gray tuned for
+     the unpressed `--w6w-panel` background, which is nearly invisible against
+     the accent fill. Not full white: the count is still secondary to the
+     label. */
+  .w6w-muted {
+    color: rgba(255, 255, 255, 0.75);
+  }
+}
+
+/* AppPicker's own layout owner, nested inside `.w6w-stepbuilder-content` (never
+   applied in its place — see the call sites). A flex item's automatic minimum
+   size is its min-content size unless `overflow` is non-`visible` or
+   `min-height:0` is set; `.w6w-stepbuilder-content` has neither, so its
+   min-content (every app row, unclipped) pushes `dialog.w6w-modal` up against
+   `max-height:90vh`. This host's explicit `height` + `overflow:hidden` zeroes
+   that contribution, so the dialog falls back to `.w6w-modal-xl`'s
+   `min-height: min(70vh, 620px)` — the step builder's own height. */
+.w6w-apppicker-host {
+  flex: 0 0 auto;
+  min-width: 0;
+  height: min(70vh, 520px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.w6w-apppicker-host > .w6w-stepbuilder-apps {
+  height: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* The picker's home tab — the intake's two-column layout:
+
+     Connnected apps | functions
+                     | workflows
+
+   Connected apps down the left; Functions above Workflows down the right.
+   Nested inside `.w6w-apppicker-host`, which owns the height, so each column's
+   own list is what scrolls — never the modal. `min-height: 0` on the grid and
+   on every column is load-bearing: a grid/flex item's automatic minimum size
+   is its min-content size, so without it a long list pushes the dialog past
+   `.w6w-apppicker-host`'s fixed height instead of scrolling inside it. */
+.w6w-readytouse {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--w6w-sp-4);
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* A half with nothing in it is not rendered at all (an empty "Workflows"
+   heading would claim you have workflows ready to use), so the grid collapses
+   to the one column that survived — and the divider below, which only makes
+   sense between two halves, goes with it. */
+.w6w-readytouse[data-cols="1"] {
+  grid-template-columns: 1fr;
+}
+
+/* The `|` in the intake's sketch. On the right half's leading edge rather than
+   as a third grid track, so it spans the full column height however tall the
+   two halves end up, and disappears with the half itself. */
+.w6w-readytouse[data-cols="2"] > .w6w-readytouse-stack {
+  border-left: 1px solid var(--w6w-border);
+  padding-left: var(--w6w-sp-4);
+}
+
+/* The right half stacks its two sections; they share the height evenly. */
+.w6w-readytouse-stack {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: var(--w6w-sp-3);
+  min-height: 0;
+}
+
+/* A single column: heading pinned, list scrolling under it. */
+.w6w-readytouse-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  min-height: 0;
+}
+
+/* One section only in the stack — a picker offering a single callable family,
+   or a workspace with Functions but no Workflows. It takes the whole right
+   half rather than leaving a gap under it. */
+.w6w-readytouse-stack > .w6w-readytouse-col:only-child {
+  grid-row: 1 / -1;
+}
+
+.w6w-readytouse-heading {
+  margin: 0;
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-semibold);
+  color: var(--w6w-muted-text, var(--w6w-text));
+}
+
+/* A Function/Workflow row, distinct from an app row at a glance: an app is
+   somebody else's service, a Function/Workflow is something YOU built here.
+   Applied by `CallableRow`, which both the home tab and the Workflows/
+   Functions tabs render — so the tint and the glyph travel together and a
+   Function looks the same wherever it is offered. */
+.w6w-stepbuilder-item--callable {
+  background: var(--w6w-panel);
+  border-style: dashed;
+}
+
+/* Step config (app action / control node): a fixed header (connection + action)
+   that never scrolls, a scrolling parameters body, and a pinned footer — mirrors
+   the fixed-header/scroll-body split used by `.w6w-stepbuilder-apps`. */
+.w6w-stepconfig {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  gap: var(--w6w-sp-3);
+  /* Horizontal breathing room so header/footer align with the padded body. */
+  padding-inline: var(--w6w-sp-1);
+}
+/* Inline step rename (pencil) shown next to the modal title. */
+.w6w-step-rename {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+.w6w-step-rename input {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-accent);
+  border-radius: 6px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-1-5);
+  color: var(--w6w-text);
+  /* lint-tokens-allow: relative em, not absolute rem like the scale's --w6w-fs- type tokens — mirrors the accepted _modal.scss:88 .w6w-modal-subtitle precedent */
+  font-size: 0.9em;
+  font-family: inherit;
+}

package/src/styles/_step-config.scss

@@ -0,0 +1,195 @@
+.w6w-stepconfig-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+  flex-shrink: 0;
+}
+/* Connection + action share a row and wrap on narrow widths. */
+.w6w-stepconfig-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-3);
+  align-items: flex-start;
+}
+.w6w-stepconfig-conn,
+.w6w-stepconfig-action {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+.w6w-stepconfig-conn-empty {
+  flex: 1 1 100%;
+}
+/* Selected connection rendered as a static label (not a dropdown). */
+.w6w-conn-label {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2) var(--w6w-sp-1-5) var(--w6w-sp-2-5);
+  min-height: 36px;
+}
+.w6w-conn-label-name {
+  flex: 1;
+  min-width: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* A pseudo-field wrapper (border/background, like every other field in this
+   form) CONTAINING two real buttons, spaced apart — `[App] <--> [Connection]`
+   (2026-08-30, fifth pass: "still missing border around SendGrid + prod...
+   look like before, where both were inside a pseudo field, only change was
+   to make the buttons look like buttons"). The outer border is back; each
+   button ALSO keeps its own border/background (one shade lighter,
+   `--w6w-panel` against the field's `--w6w-panel-2`) so it still reads as a
+   clickable button, not merely text, without the two touching directly —
+   the field's own padding is the gap between its edge and each button. */
+.w6w-app-conn-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  min-height: 36px;
+  padding: var(--w6w-sp-1);
+}
+.w6w-app-conn-btn {
+  flex: 0 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2-5);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: var(--w6w-text);
+}
+.w6w-app-conn-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.w6w-app-conn-btn:hover:not(:disabled),
+.w6w-app-conn-btn[aria-expanded="true"] {
+  border-color: var(--w6w-accent);
+}
+
+/* A flyout popover (App/Connection pickers) — portaled to the enclosing
+   `<dialog>` so it floats OVER the modal's own scrollable body instead of
+   being clipped/squeezed inside it (`Flyout` component doc has the why).
+   Plain positioned div, not a nested native dialog. No max-height/overflow
+   of its own: `AppPicker` already caps and scrolls itself
+   (`.w6w-apppicker-host`, `min(70vh, 520px)`), and the plain connection
+   list is short enough in practice to size to content — a SECOND scroll
+   container nested inside this one would double-scroll `AppPicker`. */
+.w6w-flyout {
+  position: fixed;
+  z-index: 40;
+  /* No `box-sizing: border-box` reset elsewhere in this package (checked) —
+     the inline `width` set by `Flyout` is meant to match the anchor row
+     EXACTLY (2026-08-30: "should extend to the end of the prod button and
+     div"), so padding/border must come out of that width, not add to it. */
+  box-sizing: border-box;
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  padding: var(--w6w-sp-2);
+}
+.w6w-btn-sm {
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  font-size: var(--w6w-fs-xs);
+  flex-shrink: 0;
+}
+/* Only the parameters form scrolls; x-padding keeps fields off the edge + scrollbar. */
+.w6w-stepconfig-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-inline: var(--w6w-sp-1);
+  padding-right: var(--w6w-sp-2);
+}
+/* Footer pinned to the modal bottom, outside the scroll area. */
+.w6w-stepconfig-footer {
+  flex-shrink: 0;
+  border-top: 1px solid var(--w6w-border);
+  padding-top: var(--w6w-sp-3);
+  margin-top: 0;
+}
+/* Test-required note — always rendered (empty when there is nothing to say),
+   so its reserved height keeps the footer's buttons at the same x/y whether
+   the note has text or not; one line, ellipsized rather than wrapped. */
+.w6w-stepconfig-testnote {
+  flex-shrink: 0;
+  min-height: 1.4em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The whole-config "code"/JSON view is a DIRECT child of the body — stretch it
+   to fill the modal height instead of leaving the dialog half-empty (it passes
+   height="100%"). Inline json/code PARAM fields live inside a `.w6w-field` and
+   size to their content, capped by the editor's own maxHeight (grow, then
+   scroll inside), so they are intentionally NOT stretched here — that was the
+   cause of the empty space + overlap under short group/json fields. */
+.w6w-stepconfig-body:has(> .w6w-code-editor, > .w6w-json-editor) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+}
+.w6w-stepconfig-body > .w6w-code-editor,
+.w6w-stepconfig-body > .w6w-json-editor {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+/* The `copyable` prop's button overlays `.w6w-json-editor`'s own top-right
+   corner — mirrors `_copyable.scss:86-100`'s CodeBlock geometry, but there is
+   no `<pre>` here for a `:has()` selector to reach, so it is scoped directly
+   to the class instead. Anchored to `.w6w-json-editor` itself (not the
+   CodeMirror scroller), so it stays pinned to the visible corner rather than
+   scrolling with the content. */
+.w6w-json-editor {
+  position: relative;
+}
+.w6w-json-editor > .w6w-copyable-btn {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  /* Opaque backdrop: this button sits ON the JSON's first line, and
+     `.w6w-icon-btn`'s transparent idle state would let the text read through
+     it (mirrors `_copyable.scss:93-99`'s rationale exactly). */
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+}
+.w6w-stepconfig-body .w6w-field > textarea {
+  resize: vertical;
+}
+/* Field label row with a trailing action (e.g. the JSON "open full view" btn). */
+.w6w-field-labelrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+}
+/* Full-view JSON modal body — fill the dialog so the editor is roomy. */
+.w6w-json-fullview {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+  height: 60vh;
+}
+.w6w-json-fullview > .w6w-json-editor {
+  flex: 1 1 auto;
+  min-height: 0;
+}

package/src/styles/_tabs.scss

@@ -0,0 +1,54 @@
+.w6w-subtab {
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  padding: 5px var(--w6w-sp-3);
+  color: var(--w6w-muted);
+  font-size: 13px;
+  cursor: pointer;
+}
+.w6w-subtab:hover {
+  color: var(--w6w-text);
+}
+.w6w-subtab.active {
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  font-weight: var(--w6w-fw-medium);
+}
+.w6w-subtab:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.w6w-subtab:disabled:hover {
+  color: var(--w6w-muted);
+}
+
+/* Full-width tabs bar: segmented tabs on the left, view icons on the right. */
+.w6w-tabsbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-3);
+  border-bottom: 1px solid var(--w6w-border);
+  padding-bottom: var(--w6w-sp-2);
+  flex-shrink: 0;
+}
+.w6w-icon-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.w6w-icon-btn:disabled:hover {
+  background: transparent;
+  color: var(--w6w-muted);
+}
+
+/* Config modal body (a picked app/node) fills the dialog so the footer pins to
+   the modal's bottom rather than a fixed-height content area. */
+.w6w-stepbuilder-config {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Compact one-line step identity (id · app · action) in the edit modal. */