fix(#744): polish MethodChip layout for narrow (≤375px) viewports

[legalienn]

Overview

This PR audits the MethodChip component for narrow mobile viewports (≤375px). Tap targets are enlarged to meet WCAG 2.5.5 minimum 44×44px, padding and margins are increased for better touch interaction, and the chip layout now wraps gracefully when multiple chips overflow the viewport.

Related Issue

Closes #744

Changes

• src/components/MethodChip.css — Add @media (max-width: 375px) breakpoint with enlarged padding (10px 14px), 44px min-height, increased font-size, larger icon gap, and adjusted tooltip styling. Base styles also improved with increased min-height (32px) and padding.
• src/components/MethodChip.test.tsx — Add 9 focused tests covering render, focus, tooltip, CSS class contract for responsive breakpoints, design-token color usage, and fallback colors for unknown methods.

Verification Results

npx vitest run src/components/MethodChip.test.tsx
✅ 9/9 passed

Acceptance Criteria	Status
Tap targets ≥ 44×44px on narrow viewports	✅ CSS @media breakpoint enforces min-height: 44px, min-width: 44px
Chips wrap without overflow	✅ Increased margin/gap allows natural flex-wrap
Tooltip remains accessible on mobile	✅ Larger padding, font-size, and repositioned on narrow screens
Tests added for new behavior	✅ 9 new tests

Timeline

• legalienn committed

[greatest0fallt1me]

Closing this as invalid — it doesn't link to a DripsWave-assigned issue or the PR author isn't the current assignee.

To contribute: apply on DripsWave, wait for assignment, then open a PR with Closes #<issue-number> in the body. Thanks!