fix: resolve profiles list mobile layout overflow

[simple-agent-manager]

Summary

• Profile cards on the Agent Profiles page overflowed horizontally on mobile (375px), making edit/delete buttons unreachable on phones.
• Root cause: shrink-0 action buttons in a horizontal flex layout with no overflow-hidden on the card container, plus inline delete confirmation buttons adding too much width.
• Fix: Added overflow-hidden to card wrapper, moved delete confirmation to a separate row below card content, added min-w-0 for proper text truncation, added 44px min touch targets, and focus-visible outline rings for keyboard accessibility.

Validation

• pnpm lint (0 errors, pre-existing warnings only)
• pnpm typecheck
• pnpm test (pre-existing UI package ButtonGroup test failure only — not caused by this PR)
• pnpm build
• Playwright visual audit: 6 mobile test scenarios pass with assertNoOverflow

Staging Verification (REQUIRED for all code changes — merge-blocking)

• Staging deployment green — Deploy Staging workflow passed for sam/try-mock-profiles-page-01kqh7
• Live app verified via Playwright — logged into app.sammy.party using test credentials
• Existing workflows confirmed working — dashboard loads, projects visible, navigation works, no new console errors
• New feature/fix verified on staging — profiles page renders correctly at 375px mobile viewport, edit/delete buttons accessible, delete confirmation renders in separate row without overflow
• Infrastructure verification: N/A: no infra changes
• Mobile and desktop verification notes added for UI changes

Staging Verification Evidence

• Profiles page at 375px: all 4 profile cards render fully within viewport, no horizontal overflow (scrollWidth === innerWidth === 375)
• Delete confirmation: renders as separate row below card content, Cancel and Confirm buttons fully visible and tappable
• Dashboard regression check: loads correctly, project cards visible, navigation works

UI Compliance Checklist (Required for UI changes)

• Mobile-first layout verified (375px iPhone SE)
• Accessibility checks completed (focus-visible rings on all action buttons, aria-labels, 44px touch targets)
• Shared UI components used or exception documented (raw buttons used for confirmation row — consistent with existing card patterns)
• Playwright visual audit run locally — 6 mobile scenarios (normal, long text, empty, many items, error, delete confirmation) tested at 375x667; no horizontal overflow; screenshots in .codex/tmp/playwright-screenshots/

End-to-End Verification (Required for multi-component changes)

N/A: CSS-only fix within a single component, no cross-component data flow.

Data Flow Trace

N/A: layout-only change, no data flow affected.

Untested Gaps

Desktop Playwright tests skipped due to pre-existing error boundary crash (affects triggers-ui-audit.spec.ts and other desktop viewport tests). Filed as backlog task: tasks/backlog/2026-05-01-fix-playwright-desktop-test-infrastructure.md.

Post-Mortem (Required for bug fix PRs)

What broke

Profile cards overflowed off-screen on mobile (375px), making edit/delete buttons unreachable on phones.

Root cause

The ProfileList.tsx card layout used flex items-start gap-3 with shrink-0 action buttons. On 375px mobile, the combined width of content + action buttons (edit icon + delete icon, or edit icon + Cancel + Confirm during delete flow) exceeded the viewport width. No overflow-hidden on the card container allowed the overflow to propagate.

Class of bug

Mobile layout overflow — fixed-width elements in flexible containers without overflow containment.

Why it wasn't caught

No Playwright visual audit existed for the profiles page. The existing mobile viewport rule (.claude/rules/17-ui-visual-testing.md) was not applied when the component was originally created.

Process fix included in this PR

Added apps/web/tests/playwright/profiles-ui-audit.spec.ts with 6 mobile test scenarios and assertNoOverflow checks — this ensures future changes to the profiles list are tested for mobile layout integrity.

Post-mortem file

N/A: Minor UI layout fix — post-mortem documented in PR description above.

Specialist Review Evidence (Required for agent-authored PRs)

• All dispatched reviewers completed and findings addressed before merge
• If any reviewer did NOT complete: needs-human-review label added and merge deferred to human — all completed

Reviewer	Status	Outcome
ui-ux-specialist	ADDRESSED	Focus-visible rings missing on action buttons (blocker) — fixed in commit 9a4dafb. Also added min-w-[44px] to cancel button, fixed import spacing.
task-completion-validator	ADDRESSED	Error state test used timeout instead of selector (MEDIUM) — fixed in commit 6e04e41. Desktop test infrastructure issue filed as backlog task. Checklist items checked off.

Exceptions (If any)

• Scope: Desktop Playwright tests skipped
• Rationale: Pre-existing error boundary crash on desktop layout in Playwright test environment (affects multiple test files, not specific to this PR)
• Expiration: Until tasks/backlog/2026-05-01-fix-playwright-desktop-test-infrastructure.md is resolved

Agent Preflight (Required)

• Preflight completed before code changes

Classification

• ui-change

External References

N/A: CSS layout fix using existing Tailwind utilities, no external API or library changes.

Codebase Impact Analysis

• apps/web/src/components/agent-profiles/ProfileList.tsx — card layout restructured for mobile overflow prevention
• apps/web/tests/playwright/profiles-ui-audit.spec.ts — new Playwright visual audit test

Documentation & Specs

N/A: no behavior or API changes, layout-only fix.

Constitution & Risk Check

Principle XI (No Hardcoded Values): No new hardcoded values introduced. Touch target sizes (44px) follow platform conventions.

[sonarqubecloud]

Quality Gate failed

Failed conditions
9.6% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud