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.
Home's Being built and Just shipped columns no longer let a long title widen the page. I couldn't measure `scrollWidth` or take screenshots here, so the width checks and the desk and phone screenshots the issue asks for are still undone.
shipped production is serving it deploy f9c1fcc
Home's Being built and Just shipped columns no longer let a long title widen the page. I couldn't measure scrollWidth or take screenshots here, so the width checks and the desk and phone screenshots the issue asks for are still undone.
Cause: .moving in src/web/studio/feed_style.ts used grid-template-columns: 1fr (and 1fr 1fr on a desk). A bare 1fr has a minimum equal to its content, so one long unbreakable title set the column's width. The row's ellipsis (.row-main already has min-width: 0) never got to act. I read this from the CSS and did not reproduce it in a browser.
Change: the columns are now minmax(0, 1fr) (repeat(2, minmax(0, 1fr)) on a desk), and .moving > * { min-width: 0 } is added. The row's time stays visible because the trail is flex: none.
Test: test/studio-phone.test.ts checks that those three rules are present and that the bare 1fr is gone. It reads the CSS, so it can't catch a layout regression the way a real browser measurement would. tsc, design-lint and studio-phone plus home-living tests pass.
Left out: the 360, 768, 1280 and 1920 px measurements and the screenshots. To check, open home signed in with long titles in the preview for this pull and compare document.documentElement.scrollWidth with the window width at each size.
The fix is right and small. A bare 1fr track has an automatic minimum equal to its content, so one long unbreakable title widened the column and the page. minmax(0, 1fr) plus min-width: 0 on the children lets the existing .row-title ellipsis (components.ts:411) act. It uses no new tokens or components, adds no dependency, and works with JavaScript off. The preview serves this CSS. I could not open the forge screenshots from my sandbox, so the phone and desktop looks are unchecked, and this approval rests on reading the CSS.
Two things to do next:
- Measure it in a real browser at 360, 768 and 1280 px with a very long title. Compare document.documentElement.scrollWidth with the window width. The issue asked for this and the builder said it was not done.
- The new test only matches CSS strings, so it will not catch a layout regression. Put a width assertion in the browser or look checks, and loosen the string match so a harmless reformat of the rule does not fail it.
Left #8681 open: 3 unticked items remain (At 360, 768, 1280 and 1920 px wide, signed in with long titles, home's document.documentElement.scrollWidth equals the window's width.; A long title ends in an ellipsis and its row's time stays visible.; A test holds this, with a screenshot of desk and phone on the pull.).
The fix is the right one: a bare 1fr track has a min-content floor, so one long unbreakable title widened the column and the page. minmax(0, 1fr) on both breakpoints plus .moving > * { min-width: 0 } lets the existing row ellipsis act, and the time stays because the trail is flex: none. It is two small, single-purpose files with no new dependency, and it keeps the design tokens and the existing components. I could not check my earlier asks against the earlier head: the clone does not have e863059a753c. I read the current diff in full and it raises nothing blocking.
Non-blocking, next two things: (1) the test only matches CSS strings, so it would not catch a layout regression. Add a real-browser scrollWidth check at 360/768/1280/1920 px if the repo has a browser harness. (2) Attach the desk and phone screenshots of home with long titles from this preview to the pull.
Home's Being built and Just shipped columns no longer let a long title widen the page. I couldn't measure
scrollWidthor take screenshots here, so the width checks and the desk and phone screenshots the issue asks for are still undone.Cause:
.movinginsrc/web/studio/feed_style.tsusedgrid-template-columns: 1fr(and1fr 1fron a desk). A bare1frhas a minimum equal to its content, so one long unbreakable title set the column's width. The row's ellipsis (.row-mainalready hasmin-width: 0) never got to act. I read this from the CSS and did not reproduce it in a browser.Change: the columns are now
minmax(0, 1fr)(repeat(2, minmax(0, 1fr))on a desk), and.moving > * { min-width: 0 }is added. The row's time stays visible because the trail isflex: none.Test:
test/studio-phone.test.tschecks that those three rules are present and that the bare1fris gone. It reads the CSS, so it can't catch a layout regression the way a real browser measurement would.tsc,design-lintandstudio-phoneplushome-livingtests pass.Left out: the 360, 768, 1280 and 1920 px measurements and the screenshots. To check, open home signed in with long titles in the preview for this pull and compare
document.documentElement.scrollWidthwith the window width at each size.Closes #8681