Commit `e1a9f52605`

e1a9f52605bcbb486290e7fa10b63ddf596cf65b

parent: f39a596ecd

Verified · cmc

cmc <hello@cleberg.net> · 2026-09-19 22:52 UTC

web: sticky columns scroll, and a phone keeps its wrapping

A sticky column taller than the viewport had an unreachable tail once
the page scrolled: .filenav, .sidecol and the dashboard aside cap at the
viewport and scroll inside themselves, above 62rem only.

.meta on the one-line rows kept white-space: nowrap below 62rem, so a
long branch name or a long owner/repo#N forced horizontal page scroll.
.meta and .topics reset there beside .title and .desc.

The pinned chip row moves to the 80rem block: the pinned block is a chip
row whenever it is not a column (spec rule 7), rather than a full-width
bordered list with its counts at the far edge between 62 and 80rem.

h2.empty has no user left now the dashboard prints no empty headings.
main.wide folds into the shared container rule.

Ref #226

internal/web/layout_test.go +1 −1

		@@ -19,7 +19,7 @@ func TestSharedCenteredContainer(t *testing.T) {
19	19	css := string(StyleCSS)
20	20	for _, want := range []string{
21	21	"--container: 100rem;",
22		"main.content, footer { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; }",
	22	"main.content, main.wide, footer { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; }",
23	23	".repohead .wrap { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; padding: 0 var(--sp-6); }",
24	24	"main.reading { max-width: calc(72rem + 2 * var(--sp-6)); margin: 0 auto; }",
25	25	"main.bounded { max-width: calc(48rem + 2 * var(--sp-6)); margin: 0 auto; }",

internal/web/static/style.css +21 −8

		@@ -375,8 +375,9 @@ main.content {
375	375	width: 100%;
376	376	padding: var(--sp-5) var(--sp-6) var(--sp-7);
377	377	}
378		main.content, footer { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; }
379		main.wide { max-width: calc(var(--container) + 2 * var(--sp-6)); }
	378	/* the container is the default width and what `wide` names; reading and
	379	bounded follow, so equal specificity gives them the cascade */
	380	main.content, main.wide, footer { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; }
380	381	main.reading { max-width: calc(72rem + 2 * var(--sp-6)); margin: 0 auto; }
381	382	main.bounded { max-width: calc(48rem + 2 * var(--sp-6)); margin: 0 auto; }
382	383	footer {
		@@ -1410,6 +1411,14 @@ a.memberchip .role { color: var(--muted); }
1410	1411	.sidecol form.searchform { margin-top: var(--sp-2); }
1411	1412	.sidecol form.searchform input[type="text"] { min-width: 0; width: 100%; }
1412	1413
	1414	/* a sticky column taller than the viewport scrolls inside itself, or its
	1415	tail is unreachable once the page scrolls. Above 62rem only: below it
	1416	.filenav is hidden and the other two are static. .dashpins stops being
	1417	a column at 80rem and resets both properties there. */
	1418	@media (min-width: 62.01rem) {
	1419	.filenav, .sidecol, .dashgrid > aside { max-height: calc(100vh - 2 * var(--sp-4)); overflow-y: auto; }
	1420	}
	1421
1413	1422	.refchip {
1414	1423	display: inline-flex;
1415	1424	align-items: center;
		@@ -1543,7 +1552,6 @@ pre.quickstart { margin: 0 0 var(--sp-4); }
1543	1552	.profilehead .meta { margin: var(--sp-1) 0 0; }
1544	1553	.activity { margin-bottom: var(--sp-5); }
1545	1554	h2 .count { background: none; color: var(--muted); font-weight: 400; font-size: var(--fs-2); margin-left: var(--sp-2); padding: 0; }
1546		h2.empty { color: var(--muted); font-weight: 500; font-size: var(--fs-3); margin: var(--sp-2) 0; }
1547	1555	/* 53 week columns x 7 day rows, tinted with the link blue */
1548	1556	.actgraph-scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
1549	1557	.actgraph { display: flex; gap: 3px; width: max-content; padding-top: 18px; }
		@@ -1599,7 +1607,12 @@ svg.icon { vertical-align: -0.125em; }
1599	1607	/* ---- breakpoints ---- */
1600	1608	@media (max-width: 80rem) {
1601	1609	.dashgrid { grid-template-columns: minmax(0, 1fr) 20rem; }
1602		.dashgrid > .dashpins { grid-column: 1 / -1; position: static; }
	1610	/* not a column any more, so it neither sticks nor scrolls in itself */
	1611	.dashgrid > .dashpins { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
	1612	/* a pinned block that is not a column is the chip row (spec rule 7) */
	1613	.pins { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
	1614	.pins li { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-1) var(--sp-3); }
	1615	.pins .n, .dashpins .meta { display: none; }
1603	1616	}
1604	1617
1605	1618	@media (max-width: 62rem) {
		@@ -1610,13 +1623,13 @@ svg.icon { vertical-align: -0.125em; }
1610	1623	/* rows go back to two lines where one does not fit */
1611	1624	ul.issuelist.rows .issuemain, ul.repolist.rows li, ul.loglist.rows .commitmain { display: block; }
1612	1625	ul.issuelist.rows .title, ul.repolist.rows .desc { white-space: normal; }
	1626	/* a nowrap meta or topic line on one of these rows forces horizontal
	1627	page scroll on a phone: a long branch name, a long owner/repo#N */
	1628	ul.issuelist.rows .meta, ul.loglist.rows .meta,
	1629	ul.repolist.rows .meta, ul.repolist.rows .topics { white-space: normal; }
1613	1630
1614	1631	.dashgrid { grid-template-columns: 1fr; }
1615	1632	.dashgrid > aside { position: static; }
1616		/* the pinned column goes back to a chip row on a phone */
1617		.pins { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
1618		.pins li { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-1) var(--sp-3); }
1619		.pins .n, .dashpins .meta { display: none; }
1620	1633	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1621	1634
1622	1635	/* the tree page is the navigator on a phone */

Commit e1a9f52605

Commit `e1a9f52605`