Public: anyone can read this; the crew can change it.
The subscriptions page's headroom form draws §5's field and row, and .headroom leaves its markup #4408
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/4404-the-subscriptions-page-s-headroom-form-d → main 1 commit fork 1 thread · 1 unresolved
3 files
changed +14
−2
src/web/pages/subscriptions.ts +3 −2
| @@ -222,7 +222,7 @@ export function subscriptionsPage(ctx: Ctx): Response { | ||
| 222 | 222 | st !== undefined, |
| 223 | 223 | () => |
| 224 | 224 | html`<form |
| 225 | class="headroom row-fields" | |
| 225 | class="row-fields" | |
| 226 | 226 | method="post" |
| 227 | 227 | action="${POOL}/${s.id}/headroom" |
| 228 | 228 | > |
| @@ -246,7 +246,7 @@ export function subscriptionsPage(ctx: Ctx): Response { | ||
| 246 | 246 | s.id !== PLATFORM, |
| 247 | 247 | () => |
| 248 | 248 | html`<form |
| 249 | class="headroom row-fields" | |
| 249 | class="row-fields" | |
| 250 | 250 | method="post" |
| 251 | 251 | action="${POOL}/${s.id}/budget" |
| 252 | 252 | > |
| @@ -287,6 +287,7 @@ export function subscriptionsPage(ctx: Ctx): Response { | ||
| 287 | 287 | )}`, |
| 288 | 288 | }); |
| 289 | 289 | }), |
| 290 | { extra: "setting-list" }, | |
| 290 | 291 | ); |
| 291 | 292 | |
| 292 | 293 | const add = card( |
src/web/style/components.ts +2
| @@ -447,6 +447,8 @@ details[open] > summary.row > .row-lead { transform: rotate(90deg); } | ||
| 447 | 447 | they wrap under the text before they would clip, at any width. */ |
| 448 | 448 | .row-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } |
| 449 | 449 | .row-fields .input { min-width: 0; max-width: 100%; } |
| 450 | /* A number beside its label in a settings row stays a few digits wide. */ | |
| 451 | .row-fields .input[type="number"] { width: 5em; } | |
| 450 | 452 | .row-fields .check { align-items: center; } |
| 451 | 453 | .setting-list .row { flex-wrap: wrap; align-items: flex-start; } |
| 452 | 454 | .setting-list .row-main { flex: 1 1 18rem; } |
test/subscriptions.test.ts +9
| @@ -630,6 +630,15 @@ describe("the pages", () => { | ||
| 630 | 630 | expect(getHeadroom(app.db, work.id)).toBe(25); |
| 631 | 631 | }); |
| 632 | 632 | |
| 633 | test("the headroom form is §5's row fields, with no class of its own", async () => { | |
| 634 | const work = account(); | |
| 635 | const html = await get("/settings/subscriptions"); | |
| 636 | expect(html).not.toContain('class="headroom'); | |
| 637 | expect(html).toContain(`action="/settings/subscriptions/${work.id}/headroom"`); | |
| 638 | expect(html).toMatch(/<form\s+class="row-fields"[^>]*headroom"/); | |
| 639 | expect(html).toMatch(/<input[^>]*name="headroom"/); | |
| 640 | }); | |
| 641 | ||
| 633 | 642 | test("nobody but an admin reaches the pool", async () => { |
| 634 | 643 | const signed = await fetch(`${base}/signup`, { |
| 635 | 644 | method: "POST", |
new above
offline
Good: reuses existing classes. Once .headroom is gone from content.ts, this is the only place the 5em width lives.