Public: anyone can read this; the crew can change it.
A change's wall of cells draws §5's grid and card, and .wall-cells leaves the stylesheet #4673
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/4588-a-change-s-wall-of-cells-draws-5-s-grid → main 7 commits fork 1 thread · 1 unresolved
4 files
changed +5
−7
docs/DESIGN.md +1 −1
| @@ -395,7 +395,7 @@ gone, so this list only shrinks. | ||
| 395 | 395 | A `.field` directly inside a `.bar` drops its bottom margin and the bar aligns to the end, so a labelled input and its button share a baseline |
| 396 | 396 | - **`style/components.ts`** — parts of the §5 components that the table does not spell out — the palette's list, the menu's items, a dialog's head and foot, comments, the theme picker — and a few small helpers beside them: `.cat` `.clone` `.clone-text` `.comment` `.comment-body` `.comment-form` `.dash` `.dialog-body` `.dialog-foot` `.dialog-head` `.empty-title` `.error-note` `.field-row` `.form-actions` `.hex` `.ico` `.ico-loader` `.list` `.menu-item` `.menu-panel` `.menu-sep` `.menu-title` `.palette-empty` `.palette-foot` `.palette-group` `.palette-heading` `.palette-input` `.palette-item` `.palette-list` `.passkey` `.passkey-off` `.passkey-on` `.preview` `.sep` `.split` `.sprite` `.swatch` `.table-scroll` `.tell-here` `.theme-apply` `.theme-option` `.tick` `.timeline` `.tl-dot` `.toast-body` `.topbar-search` |
| 397 | 397 | - **`style/components.ts`, settings rows** — a list whose rows are settings (limits, capacity): the `<ul class="list setting-list">` lets title and meta wrap instead of ellipsizing, and a row's controls take their own line under 640px. `.row-fields` is the form in that row's trail (input, Save, Default): always visible, never hover-gated, wrapping under the text before it would clip. Use both for any page whose rows show a name, a current value, and a control to change it; use `.row-actions` only for secondary actions (delete, wake, pin, revoke). Flags, telemetry, cloud, people, crew roles and subscription headroom/budget use `.row-fields`. Classes: `.row-fields` `.setting-list` |
| 398 | - **`style/content.ts`, page furniture** — what frames a page's content: page and repo heads, the front page and its tiles, explore, backups, boards, the fleet chart's series colours, lineage: `.bform` `.bgrid` `.bmanage` `.bp-h2` `.bp-h3` `.bp-w2` `.bp-w3` `.break` `.bt-bar` `.bt-grid` `.bt-group` `.bt-hist` `.bt-name` `.bt-procs` `.bt-row` `.bt-val` `.commit-body` `.commit-head` `.domain-records` `.fg-s0` `.fg-s1` `.fg-s2` `.fg-s3` `.fg-s4` `.fg-s5` `.fg-s6` `.fg-s7` `.filters` `.flag-form` `.front-admin` `.front-controls` `.front-crew` `.front-featured` `.front-featured-body` `.front-featured-look` `.front-issues` `.front-live` `.front-more` `.front-pick` `.frozen` `.frozen-form` `.frozen-sentence` `.headroom` `.issue-head` `.issue-meta` `.mirror-form` `.number` `.origin-mark` `.origin-name` `.origin-row` `.owner` `.page-head` `.path-head` `.policy-line` `.qf` `.repo-actions` `.repo-audience` `.repo-desc` `.repo-layout` `.repo-lineage` `.repo-title` `.search` `.slash` `.stage-detail` `.stage-dot` `.steps` `.sub` `.sys-pair` `.table-wrap` `.tok` `.wall-cells` `.where-sep` | |
| 398 | - **`style/content.ts`, page furniture** — what frames a page's content: page and repo heads, the front page and its tiles, explore, backups, boards, the fleet chart's series colours, lineage: `.bform` `.bgrid` `.bmanage` `.bp-h2` `.bp-h3` `.bp-w2` `.bp-w3` `.break` `.bt-bar` `.bt-grid` `.bt-group` `.bt-hist` `.bt-name` `.bt-procs` `.bt-row` `.bt-val` `.commit-body` `.commit-head` `.domain-records` `.fg-s0` `.fg-s1` `.fg-s2` `.fg-s3` `.fg-s4` `.fg-s5` `.fg-s6` `.fg-s7` `.filters` `.flag-form` `.front-admin` `.front-controls` `.front-crew` `.front-featured` `.front-featured-body` `.front-featured-look` `.front-issues` `.front-live` `.front-more` `.front-pick` `.frozen` `.frozen-form` `.frozen-sentence` `.headroom` `.issue-head` `.issue-meta` `.mirror-form` `.number` `.origin-mark` `.origin-name` `.origin-row` `.owner` `.page-head` `.path-head` `.policy-line` `.qf` `.repo-actions` `.repo-audience` `.repo-desc` `.repo-layout` `.repo-lineage` `.repo-title` `.search` `.slash` `.stage-detail` `.stage-dot` `.steps` `.sub` `.sys-pair` `.table-wrap` `.tok` `.where-sep` | |
| 399 | 399 | - **`style/content.ts`, code view** — the source view and the syntax-highlight token classes `highlight-html.ts` builds as `tok-${kind}`: `.blob-view` `.ln` `.tok-attribute` `.tok-comment` `.tok-constant` `.tok-decorator` `.tok-deleted` `.tok-emphasis` `.tok-function` `.tok-heading` `.tok-inserted` `.tok-keyword` `.tok-link` `.tok-meta` `.tok-number` `.tok-operator` `.tok-plain` `.tok-property` `.tok-punctuation` `.tok-regex` `.tok-string` `.tok-tag` `.tok-type` `.tok-variable` |
| 400 | 400 | - **`style/content.ts`, prose (markdown)** — table cell alignment, built by `markdown.ts` as `ta-${align}`: `.ta-c` `.ta-r` |
| 401 | 401 | - **`style/content.ts`, diff viewer** — the diff table: its gutters, line kinds, file head and inline review comments: `.add` `.del` `.dh` `.diff` `.diff-body` `.diff-head` `.diff-note` `.diff-path` `.diff-stat` `.diff-stub` `.diff-summary` `.diff-table` `.dl` `.dl-review` `.dn` `.dn-comment` `.nonl` `.rc-hidden` `.rc-resolve` `.rc-resolved` `.wd` |
src/web/studio/change.ts +3 −3
| @@ -115,11 +115,11 @@ export function wallCard(wall: Wall): Html { | ||
| 115 | 115 | ? "An app built on it does not boot. A person decides this one." |
| 116 | 116 | : "A cell loosened is a decision undone, so the crew leaves this to a person: read the cells, then land or say what is off."} |
| 117 | 117 | </p> |
| 118 | <ul class="wall-cells"> | |
| 118 | <div class="stack stack-tight mono"> | |
| 119 | 119 | ${(wall.unsound ?? wall.loosened.map(wallSentence)).map( |
| 120 | (line) => html`<li>${line}</li>`, | |
| 120 | (line) => html`<div>${line}</div>`, | |
| 121 | 121 | )} |
| 122 | </ul>`, | |
| 122 | </div>`, | |
| 123 | 123 | { |
| 124 | 124 | tone: "attn", |
| 125 | 125 | extra: "wall mt", |
src/web/style/content.ts −2
| @@ -237,7 +237,6 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 237 | 237 | .frozen-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 10px; } |
| 238 | 238 | .frozen-form .field { margin: 0; min-width: 0; flex: 1 1 14rem; max-width: 22rem; } |
| 239 | 239 | |
| 240 | .wall-cells { margin: 8px 0 0; padding-left: 18px; font-family: var(--mono); font-size: 12.5px; } | |
| 241 | 240 | /* A subscription's headroom for people: a small number beside its windows. */ |
| 242 | 241 | .headroom { display: flex; align-items: center; gap: 6px; } |
| 243 | 242 | .headroom .input { width: 5em; } |
| @@ -318,7 +317,6 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 318 | 317 | .policy-line b { color: var(--fg); font-weight: 600; } |
| 319 | 318 | .policy-line[data-tone="mismatch"] .ico { color: var(--danger); } |
| 320 | 319 | .policy-line[data-tone="ok"] .ico { color: var(--success); } |
| 321 | .wall-cells li + li { margin-top: 3px; } | |
| 322 | 320 | form.inline { display: inline; margin-left: auto; } |
| 323 | 321 | |
| 324 | 322 | /* The studio's front door: the public apps, live first, as pictures. */ |
test/policy.test.ts +1 −1
| @@ -245,7 +245,7 @@ describe("a pull at the wall", () => { | ||
| 245 | 245 | ); |
| 246 | 246 | expect(body).toContain("note.create as anon: was no, now yes"); |
| 247 | 247 | // The wall is §5's card, its headline in the head: no merge-* class. |
| 248 | expect(body).not.toMatch(/\bmerge-(?:box|form|headline|sub)\b/); | |
| 248 | expect(body).not.toMatch(/\b(?:merge-(?:box|form|headline|sub)|wall-cells)\b/); | |
| 249 | 249 | expect(body).toMatch( |
| 250 | 250 | /<div class="card-head">[\s\S]*?<strong\s*>This pull changes the policy: one door opens wider\.<\/strong/, |
| 251 | 251 | ); |
new above
offline
Plain <div>s drop the list semantics the <ul> gave; keep role=list/listitem or a <ul> with a reset.