From 9fa46243ca1780acd63614d01d081242b6833884 Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 30 Aug 2026 15:51:50 -0700
Subject: [PATCH] =?UTF-8?q?fix(team):=20featured=20card=20stacks=20below?=
 =?UTF-8?q?=20640px=20=E2=80=94=20the=20name=20column=20one-charred=20at?=
 =?UTF-8?q?=20390=20(#568=20class)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mandatory mobile pass caught it: the 44px|1fr|auto grid let the actions
column crush the featured name to a vertical strip. Below 640px the card
stacks (actions on their own row); invariant pins the media query.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LJ1bDdDQwWekHDqweiBhRN
---
 .../src/v2/__tests__/v2-layout-invariants.test.ts |  7 +++++++
 frontend/src/v2/v2.css                            | 15 +++++++++++++++
 2 files changed, 22 insertions(+)

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 {