diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts index 65246e41c..b9504bfae 100644 --- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts +++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts @@ -742,6 +742,13 @@ describe('v2 layout invariants (CSS rule presence)', () => { expect(v2).not.toMatch(/\{[^\n}]*\{/); // two opens on one line = doubled anchor }); + it('featured team card stacks below 640px โ€” the name column never one-chars (spec ยง5, #568 class)', () => { + const mq = v2.match(/@media \(max-width: 640px\) \{[\s\S]*?\n\}/); + expect(mq).not.toBeNull(); + expect(mq![0]).toContain('.v2-team-feature'); + expect(mq![0]).toContain('grid-template-columns: 44px minmax(0, 1fr)'); + }); + it('platform tint tokens exist in v2.css and tokens.css together', () => { const ds = fs.readFileSync(path.join(__dirname, '../../../design-system/tokens.css'), 'utf8'); for (const pf of ['telegram', 'slack', 'discord', 'whatsapp']) { diff --git a/frontend/src/v2/v2.css b/frontend/src/v2/v2.css index 2f63c1b08..abd7f4521 100644 --- a/frontend/src/v2/v2.css +++ b/frontend/src/v2/v2.css @@ -3973,6 +3973,21 @@ body.modern-ui.v2-canvas { cursor: pointer; } .v2-root button.v2-team-feature__profile:hover { color: var(--v2-accent-text); } +/* Featured card below 640px: the three-column grid crushes the name to one + character per line (the #568 name-crush class, reborn on a new card at + 390px โ€” caught in the mandatory mobile pass). Stack: actions drop to + their own row under the body, name keeps the full text column. */ +@media (max-width: 640px) { + .v2-team-feature { + grid-template-columns: 44px minmax(0, 1fr); + } + .v2-team-feature__actions { + grid-column: 2; + justify-content: flex-start; + margin-top: 4px; + } +} + /* Standard card: one left edge, no dot, no button pair. Talk-to is an always-visible 28px icon (Sam's BEND-2 ruling โ€” hover-reveal rejected). */ .v2-root button.v2-team-card__talk-icon {