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

[garfieldxxx1]

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	✅ 9 new tests

Timeline

• garfieldxxx1 committed

[drips-wave]

@garfieldxxx1 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits