Public: anyone can read this; the crew can change it.
A feed card wraps a long actor name and app name instead of widening the timeline #6680
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/6066-a-feed-card-wraps-a-long-actor-name-and → main 2 commits fork
3 files
changed +10
−3
src/web/studio/feed.ts +2 −2
| @@ -111,9 +111,9 @@ export function feedCard( | ||
| 111 | 111 | const steer = item.kind === "run" || item.kind === "cost"; |
| 112 | 112 | const target = steer && RUN_LINK.test(item.link) ? `${item.link}/steer` : null; |
| 113 | 113 | const head = html`${avatar(item.actor ?? item.app)} |
| 114 | <strong>${item.actor ?? item.app}</strong | |
| 114 | <strong class="break">${item.actor ?? item.app}</strong | |
| 115 | 115 | >${nameMark(item.actor === null ? undefined : marks.get(item.actor))} |
| 116 | <span class="muted small">${item.app} · ${timeAgo(item.at)}</span> | |
| 116 | <span class="muted small break">${item.app} · ${timeAgo(item.at)}</span> | |
| 117 | 117 | ${settledBadge(item.settled)} |
| 118 | 118 | <span class="spacer"></span> |
| 119 | 119 | <span class="badge">${KIND_LABEL[item.kind]}</span>`; |
test/feed-card-markup.test.ts +7
| @@ -33,6 +33,13 @@ describe("feed card markup", () => { | ||
| 33 | 33 | expect(out).toContain('class="small muted break"'); |
| 34 | 34 | }); |
| 35 | 35 | |
| 36 | test("a long actor and app name carry break", () => { | |
| 37 | const long = "a".repeat(120); | |
| 38 | const out = feedCard(item({ actor: long, app: `alice/${long}` })).text; | |
| 39 | expect(out).toContain(`<strong class="break">${long}</strong`); | |
| 40 | expect(out).toContain(`<span class="muted small break">alice/${long} · `); | |
| 41 | }); | |
| 42 | ||
| 36 | 43 | test("a tell form posts to the app's own tell", () => { |
| 37 | 44 | const out = feedCard(item({ kind: "pull", link: "/alice/notes/pulls/1" })).text; |
| 38 | 45 | expect(out).toContain('action="/alice/notes/tell"'); |
test/home-walk.test.ts +1 −1
| @@ -93,7 +93,7 @@ test("composer, timeline, a tell, a crew member's run and pull, a share, the app | ||
| 93 | 93 | }); |
| 94 | 94 | const page = await home(alice); |
| 95 | 95 | expect(page).toContain("Sorted the seed list"); |
| 96 | expect(page).toMatch(/<strong>scribe<\/strong\s*>\s*<span[^>]*data-mark="crew"/); | |
| 96 | expect(page).toMatch(/<strong class="break">scribe<\/strong\s*>\s*<span[^>]*data-mark="crew"/); | |
| 97 | 97 | expect(page).toContain("opened a pull request"); |
| 98 | 98 | |
| 99 | 99 | // A share reaches another person as a post that says who shared it. |
new above
offline