Public: anyone can read this; the crew can change it.
The system page's process table scrolls in §5's .table-scroll, and .table-wrap leaves the stylesheet #4787
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/4746-the-system-page-s-process-table-scrolls → main 9 commits fork 2 threads · 2 unresolved
5 files
changed +14
−3
docs/DESIGN.md −1
| @@ -507,7 +507,6 @@ the same line (#4888). | ||
| 507 | 507 | - `.search` |
| 508 | 508 | - `.slash` |
| 509 | 509 | - `.sub` |
| 510 | - `.table-wrap` | |
| 511 | 510 | - `.tok` |
| 512 | 511 | - `.where-sep` |
| 513 | 512 | - **`style/content.ts`, code view** — the source view and the syntax-highlight token classes `highlight-html.ts` builds as `tok-${kind}`: |
src/web/pages/system.ts +1 −1
| @@ -55,7 +55,7 @@ const figureRow = (name: string, figure: string, data: Record<string, string> = | ||
| 55 | 55 | const KIND_ORDER = ["forge", "crew", "check", "app", "host"] as const; |
| 56 | 56 | function procTable(v: SystemView): Html { |
| 57 | 57 | const groups = KIND_ORDER.flatMap((k) => v.groups.filter((g) => g.kind === k)); |
| 58 | return html`<div class="table-wrap"><table class="table" data-dense aria-label="Processes by what launched them"> | |
| 58 | return html`<div class="table-scroll"><table class="table" data-dense aria-label="Processes by what launched them"> | |
| 59 | 59 | <thead><tr><th scope="col">pid</th><th scope="col">command</th><th scope="col" class="num">cpu</th><th scope="col" class="num">mem</th><th scope="col" class="num">age</th></tr></thead> |
| 60 | 60 | ${groups.map( |
| 61 | 61 | (g) => html`<tbody data-kind="${g.kind}" data-cpu="${String(g.cpuCores ?? 0)}" data-mem="${String(g.rssBytes)}"> |
src/web/style/content.ts −1
| @@ -207,7 +207,6 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 207 | 207 | .bform .qf > span { font-size: 12.5px; font-weight: 600; color: var(--fg); } |
| 208 | 208 | .bform .field { margin: 0; flex: 1 1 140px; min-width: 0; } |
| 209 | 209 | .bform .btn { flex: none; } |
| 210 | .table-wrap { overflow-x: auto; max-width: 100%; } | |
| 211 | 210 | #summary { display: flex; flex-wrap: wrap; gap: 6px; } |
| 212 | 211 | #summary .pill { max-width: 100%; white-space: normal; } |
| 213 | 212 | .bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } |
test/design-lint.test.ts +6
| @@ -166,3 +166,9 @@ describe("design check: nothing added outside the system (#2678)", () => { | ||
| 166 | 166 | }); |
| 167 | 167 | |
| 168 | 168 | const namedFromReadme = (text: string) => documentedClasses("## 5. x\n" + text); |
| 169 | ||
| 170 | describe("docs/DESIGN.md", () => { | |
| 171 | test("carries no merge conflict markers", () => { | |
| 172 | expect(readFileSync("docs/DESIGN.md", "utf8")).not.toMatch(/^(<<<<<<<|=======$|>>>>>>>)/m); | |
| 173 | }); | |
| 174 | }); |
test/ui-sweep.test.ts +7
| @@ -38,6 +38,13 @@ describe("layout", () => { | ||
| 38 | 38 | expect(css).toContain("#summary { display: flex; flex-wrap: wrap"); |
| 39 | 39 | expect(read("src/web/pages/system.ts")).toContain('<div class="table-scroll"><table class="table" aria-label="Forge memory by hour">'); |
| 40 | 40 | }); |
| 41 | test("the processes table scrolls in §5's .table-scroll and .table-wrap is gone", () => { | |
| 42 | const sys = read("src/web/pages/system.ts"); | |
| 43 | expect(sys).toContain('<div class="table-scroll"><table class="table" data-dense aria-label="Processes by what launched them">'); | |
| 44 | expect(sys).not.toContain("table-wrap"); | |
| 45 | expect(css).not.toContain("table-wrap"); | |
| 46 | expect(css).toMatch(/\.table-scroll \{[^}]*overflow-x: auto/); | |
| 47 | }); | |
| 41 | 48 | test("a pressed button looks pressed", () => { |
| 42 | 49 | expect(css).toContain('.btn[aria-pressed="true"]'); |
| 43 | 50 | }); |
new above
offline
Fix: add tabindex="0" role="region" aria-label="Processes" to this wrapper, as studio/vitals.ts does, so the sideways scroll works from the keyboard.