fix(connectors): a list card is as tall as its rows (TASK-156)

[lilyshen0722]

TASK-156. #1547 made the channel list fill the page ("the channel list is the page's content card"); #1669 then put Tools under it and the stretch carried on. ux-lead measured on 9a32fca5 with a sample-data fixture: at 1200 the channel card is 564px around 262px of rows, and with the GitHub grant open the Tools card is 718px around one 86px row — 630px of empty card. 390 was clean only because the ≤1010 block undid the stretch.

The rule

A list card is as tall as its rows. The page scrolls; a card never holds empty space. An aside taller than its list runs on past it on the white.

Changes

• .v2-connectors: drop min-height: calc(100vh - 86px) and its comment.
• .v2-connectors__content: drop flex: 1; min-height: 0;, align-items: stretch → start.
• .v2-connectors__rows: drop flex: 1; min-height: 0; (keep overflow: hidden — it clips the row corners).
• The now-dead opt-outs go with them: .v2-tools { flex: none }, and the 1010px (min-height: 0, __rows { flex: none }) and 760px (min-height: 0) undo rules.
• Slack rows name their workspace. A linked Slack stores teamName (slackOAuthService.ts:87) and never chatTitle, so the row read "Slack · linked to Ops" beside the word Slack. chatTitle still wins when both are set; the not-linked variant reads "Acme · not linked to a pod"; the non-owner projection carries neither and keeps today's fallback.

Guards, inverted with the decision

v2-layout-invariants.test.ts pinned the old stretch and each undo rule. It now asserts: no min-height on .v2-connectors; align-items: start and no flex: 1 on the content grid; no flex: 1 on the rows; the 760 rule matches gap: 24px; margin: -12px -18px 0 without a min-height.

One thing worth flagging for review: the Tools opt-out is asserted as a regex over the Connectors section, not through ruleBody. With the rule deleted, ruleBody returns '' and expect(ruleBody(v2, '.v2-tools')).not.toContain('flex: none') would have passed without reading anything — a vacuous assertion. Mutation m4 (re-adding the rule) is what proves the regex actually reads the section.

Verification

• Seven mutations, each applied in isolation, each red, every restore verified against the commit (0 differing hunk-lines): the page stretch returns (m1); the content grid stretches again (m2); the rows grow again (m3); the Tools opt-out returns (m4); the 760 undo rule returns (m5); teamName is not read at all (m6, 2 tests); teamName outranks chatTitle (m7). Base green before and after (163/163).
• Full frontend suite 109 suites / 929 tests passing; tsc --noEmit clean; eslint 0 errors (the 8 warnings on these files are pre-existing and outside the diff — verified by line).
• Production build in a scratch worktree, vite build 9.35s, and the emitted CSS confirms the deletions survive minification: .v2-connectors has no min-height, the content grid is align-items:start, the rows have no flex, no .v2-tools{flex:none} exists, and the 760 rule is {gap:24px;margin:-12px -18px 0}. jsdom parses no CSS, so the build is the check that the sheet is even valid.

Limits

jsdom has no layout engine, so the pixel claims are ux-lead's to re-measure — requested gate: 1200 and 390, default and with the GitHub grant open, with the same fixture: each .v2-connectors__rows card equals its rows plus the 2px border in both states, the GitHub row sits fully above the fold at 1440×900, and 390 is unchanged.

Out of scope, as the row says: the Discord · WhatsApp wrap (#1799), the hardcoded "linked to" string (#1717 — whichever lands second rebases), and two asides open at once (intended).

[lilyshen0722]

GATE: PASS at 9e64a125 — measured. One non-blocking note.

BASE 163/163, RESTORED 163/163, tree clean after every mutation. v2.css braces balance 2007/2007. Anchor count 1 each.

mutation	result
align-items: start → stretch	1 red
the dead .v2-tools { flex: none } restored	1 red
teamName dropped from the title chain	2 red
teamName moved ahead of chatTitle	1 red
flex: 1 restored on .v2-connectors__rows	1 red

Your trap fix works, and it is the important one. Re-adding .v2-tools { flex: none } reds. That is the proof the regex reads the section — with ruleBody returning '', not.toContain would have passed on nothing at all, which is the standard way this class of assertion dies. Catching it before shipping is the right instinct; the regex-over-the-section is the right repair.

The title chain is pinned for order, not just presence: flipping teamName ahead of chatTitle reds on its own. A chain asserted only by membership would have accepted that.

---

Note: the min-height guard reads one rule, and the cascade uses the last

expect(connectors).not.toContain('min-height') runs on ruleBody(v2, '.v2-connectors'), which takes the first line-start match — v2.css:9685. I added a second .v2-connectors { min-height: calc(100vh - 86px); } at :9706, leaving the original untouched: 163/163 green. In the browser the later rule wins and the stretch is back.

Not a defect, and not blocking: the natural way to undo this change is to edit the rule at 9685, which the guard catches. The duplicate-rule route is the one it cannot see, in an 11k-line sheet where the same selector reappearing in another section is plausible.

If you want it closed, the cheap version is a count rather than a body read:

expect(v2.match(/^\.v2-connectors \{/gm) || []).toHaveLength(1);

Same shape as #1855's order guard: a rule body answers "what does this rule say", never "what does the cascade do".

[lilyshen0722]

Gap closed. PASS stands at 8fc119b3.

I re-ran rather than carried, because the new filter is the object in question.

• Additive only, confirmed: the diff against the head I gated is +23, -0 in one test file. No assertion I measured changed, so the earlier five mutations still describe this tree.
• BASE 163/163, RESTORED 163/163, tree clean.

The route I reported is shut, and so are the two neighbours it implies:

appended at EOF	result
a second .v2-connectors { min-height: … } (my route)	1 red
.v2-root .v2-connectors { min-height: … } (descendant-scoped)	1 red
.v2-connectors__rows { flex: 1 }	1 red
base __rows rule deleted, so the scan finds nothing	1 red — the non-vacuity check

Matching on the last compound rather than the literal selector string is what makes the descendant-scoped case catchable, and it is the version I would have missed if I had only asked for a selector count: .v2-root .v2-connectors never matches ^\.v2-connectors \{ and would have slipped straight through the cheap fix I proposed.

The non-vacuity check at :1828 is the part worth keeping deliberately. A filter of the shape "every matching block is empty of X" passes loudest when nothing matches — that is the same failure that made the original .v2-tools assertion pass on an empty ruleBody. Deleting the base rule reds it, so the scan cannot silently stop scanning.

[lilyshen0722]

UX-GATE: PASS @ 8fc119b — both list cards are exactly as tall as their rows at 1200 and 1440, with the grant closed and open; the GitHub row sits fully above the 1440×900 fold; 390 is unchanged.

Measured in a real browser against 9e64a125. The main build (9a32fca5) and this branch's build were both served from disk with the same sample data. 8fc119b3 adds only test lines (+23 in v2-layout-invariants.test.ts). The CSS and component diff has the same patch-id at both heads (833432e8), so these numbers still describe the current head.

Dead space is the card height minus its rows minus the 2 px border.

	main	this PR
1200 · Channels / Tools	300 / 0	0 / 0
1200 grant open · Channels / Tools	122 / 630	0 / 0
1440 · Channels / Tools	304 / 0	0 / 0
1440 grant open · Channels / Tools	126 / 630	0 / 0

• At 1440×900 the GitHub row ends at 678, so the whole row is above the fold. On main it ends at 856.
• 390 matches main with the grant closed and open. Cards are 334 and 106 tall with no dead space. The GitHub row sits at 1023–1127 closed and 697–801 open. Nothing scrolls sideways.
• The Slack row now reads "Acme · linked to Support". On main it reads "Slack · linked to Support".

Not blocking, and filed as its own board row. Without the stretch, the Connectors page is shorter than the screen, so the inset card stops short of the bottom. At 1200×900 it ends 178 px above the edge, where the gutter should be 14. This PR only exposes the problem; the cause is in the shell (#1510). .v2-authenticated-shell uses grid-template-rows: auto minmax(0, 1fr). A verified user has no banner, so the content auto-places into the auto row, and any page shorter than the viewport shrinks the card. Agents already does this on main (195 px). Adding .v2-authenticated-shell__content { grid-row: 2; } on this branch moved the gap from 178 to 14 at 1200 and 1440. The banner case, Settings and 390 did not change. Please don't restore the page min-height here — the shell fix covers every short page at once.