From 33e5dd56a260ec31291cb391ff3d6aede19dde43 Mon Sep 17 00:00:00 2001 From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com> Date: Mon, 19 Oct 2026 08:03:55 -0700 Subject: [PATCH] fix(v2): restore pod create action styles Match the sidebar action selectors to the v2 button reset so Cancel and Create keep their intended padding, colors, and disabled state. Give both actions 40px targets on narrow screens. Raise the action labels to the 12px sans type floor and remove their obsolete burn-down allowance. Written by Sprint Impl, a Commonly agent Co-authored-by: sprint-impl Agent-Model: codex/gpt-6-sol/medium --- .../v2/__tests__/V2PodsSidebar.scale.test.tsx | 9 +++++++++ .../v2/__tests__/v2-layout-invariants.test.ts | 17 +++++++++++++++++ .../src/v2/__tests__/v2-type-floors.test.ts | 1 - frontend/src/v2/v2.css | 19 +++++++++++++------ 4 files changed, 39 insertions(+), 7 deletions(-) diff --git a/frontend/src/v2/__tests__/V2PodsSidebar.scale.test.tsx b/frontend/src/v2/__tests__/V2PodsSidebar.scale.test.tsx index ee51feb8d..b48f924ee 100644 --- a/frontend/src/v2/__tests__/V2PodsSidebar.scale.test.tsx +++ b/frontend/src/v2/__tests__/V2PodsSidebar.scale.test.tsx @@ -304,6 +304,15 @@ describe('V2PodsSidebar — direction C', () => { expect(screen.getByPlaceholderText('Pod name')).toBeInTheDocument(); }); + test('Create stays disabled until the pod has a name', () => { + renderSidebar(fleet); + fireEvent.click(screen.getByRole('button', { name: 'New pod' })); + const submit = document.querySelector('.v2-pods__create-submit'); + expect(submit).toBeDisabled(); + fireEvent.change(screen.getByPlaceholderText('Pod name'), { target: { value: 'Launch' } }); + expect(submit).toBeEnabled(); + }); + test('the page variant renders the phone list with a Pods title', () => { renderSidebar(fleet, null, { variant: 'page' }); expect(screen.getByRole('heading', { level: 1, name: 'Pods' })).toBeInTheDocument(); diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts index 750899d83..bdd439b98 100644 --- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts +++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts @@ -341,6 +341,23 @@ describe('v2 layout invariants (CSS rule presence)', () => { expect(v2).not.toContain('.v2-pods__search-kbd::before'); }); + test('pod create actions beat the button reset and keep phone-sized targets', () => { + const shared = selectorRuleBody(v2, '.v2-root button.v2-pods__create-cancel,'); + const cancel = ruleBody(v2, '.v2-root button.v2-pods__create-cancel'); + const submit = lastRuleBody(v2, '.v2-root button.v2-pods__create-submit'); + const disabled = ruleBody(v2, '.v2-root button.v2-pods__create-submit:disabled'); + const phone = blockContaining(v2, '@media (max-width: 760px)', '.v2-root button.v2-pods__create-cancel,'); + + expect(shared).toContain('padding: 6px 9px'); + expect(shared).toContain('font-size: 12px'); + expect(cancel).toContain('color: var(--v2-text-tertiary)'); + expect(submit).toContain('background: var(--v2-ink)'); + expect(submit).toContain('color: #fff'); + expect(disabled).toContain('background: var(--v2-border-strong)'); + expect(phone).not.toBe(''); + expect(ruleBody(v2, '.v2-root button.v2-pods__create-submit', { within: phone })).toContain('min-height: 40px'); + }); + test('the selected pod keeps the sidebar’s one cobalt block treatment', () => { const selected = selectorRuleBody(v2, '.v2-root button.v2-pods__row--selected'); expect(selected).toContain('background: var(--v2-accent)'); diff --git a/frontend/src/v2/__tests__/v2-type-floors.test.ts b/frontend/src/v2/__tests__/v2-type-floors.test.ts index 30c331308..77094cc4c 100644 --- a/frontend/src/v2/__tests__/v2-type-floors.test.ts +++ b/frontend/src/v2/__tests__/v2-type-floors.test.ts @@ -164,7 +164,6 @@ const ALLOWLIST: string[] = [ '.v2-mention-item__sub', // 11.0px — no-mono-family '.v2-modal__error', // 11.0px — no-mono-family '.v2-modal__hint--muted', // 11.0px — no-mono-family - '.v2-pods__create-cancel, .v2-pods__create-submit', // 11.0px — no-mono-family '.v2-pods__create-error', // 11.0px — no-mono-family '.v2-pods__discover-meta', // 11.0px — no-mono-family '.v2-pods__item-icon', // 11.0px — no-mono-family diff --git a/frontend/src/v2/v2.css b/frontend/src/v2/v2.css index 8e13e7466..779f1cd7b 100644 --- a/frontend/src/v2/v2.css +++ b/frontend/src/v2/v2.css @@ -1051,28 +1051,35 @@ body.modern-ui.v2-canvas { gap: 8px; } -.v2-pods__create-cancel, -.v2-pods__create-submit { +.v2-root button.v2-pods__create-cancel, +.v2-root button.v2-pods__create-submit { padding: 6px 9px; border-radius: var(--v2-radius-sm); - font-size: 11px; + font-size: 12px; font-weight: 700; } -.v2-pods__create-cancel { +.v2-root button.v2-pods__create-cancel { color: var(--v2-text-tertiary); } -.v2-pods__create-submit { +.v2-root button.v2-pods__create-submit { background: var(--v2-ink); color: #fff; } -.v2-pods__create-submit:disabled { +.v2-root button.v2-pods__create-submit:disabled { background: var(--v2-border-strong); cursor: not-allowed; } +@media (max-width: 760px) { + .v2-root button.v2-pods__create-cancel, + .v2-root button.v2-pods__create-submit { + min-height: 40px; + } +} + .v2-pods__filters { /* Fourth mechanism for this row (Sam's ruling 2026-08-23): every chip the SAME size, at least as roomy as the widest label. Content-sized chips