Public: anyone can read this; the crew can change it.
Home's Being built and Just shipped stay inside the screen: a long title truncates, the page never scrolls sideways #8683
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/8681-home-s-being-built-and-just-shipped-stay → main 1 commit fork
2 files
changed +14
−2
src/web/studio/feed_style.ts +3 −2
| @@ -16,9 +16,10 @@ export const feedCss = /* css */ ` | ||
| 16 | 16 | #live-apps { display: none; } |
| 17 | 17 | } |
| 18 | 18 | /* Home's living pipeline (#8015): two lists side by side on a desk. Each list always holds three rows, so nothing below moves. */ |
| 19 | .moving { display: grid; grid-template-columns: 1fr; gap: 12px; } | |
| 19 | .moving { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } | |
| 20 | .moving > * { min-width: 0; } | |
| 20 | 21 | @media (min-width: 700px) { |
| 21 | .moving { grid-template-columns: 1fr 1fr; } | |
| 22 | .moving { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| 22 | 23 | } |
| 23 | 24 | .moving .row { min-height: 44px; } |
| 24 | 25 | .tell-box > input[name="text"] { flex: 1 1 14rem; min-width: 0; } |
test/studio-phone.test.ts +11
| @@ -25,3 +25,14 @@ describe("the studio at 360px", () => { | ||
| 25 | 25 | expect(phone.startsWith("@media")).toBe(true); |
| 26 | 26 | }); |
| 27 | 27 | }); |
| 28 | ||
| 29 | describe("home's moving lists stay inside the screen (#8681)", () => { | |
| 30 | const css = studioCss; | |
| 31 | ||
| 32 | test("the columns may shrink below their content, so a long title ellipsizes", () => { | |
| 33 | expect(css).toContain(".moving { display: grid; grid-template-columns: minmax(0, 1fr);"); | |
| 34 | expect(css).toContain("grid-template-columns: repeat(2, minmax(0, 1fr))"); | |
| 35 | expect(css).toContain(".moving > * { min-width: 0; }"); | |
| 36 | expect(css).not.toMatch(/\.moving \{[^}]*grid-template-columns: 1fr/); | |
| 37 | }); | |
| 38 | }); |
new above
offline