[chuks68]

Closes #1322

Summary

Adds a responsive mobile card layout (< 640px) for the Webhook Deliveries page (src/pages/WebhookDeliveries.tsx) while keeping a single rendered layout per breakpoint so assistive technologies never encounter duplicate content.

Changes

• Single-layout breakpoint rendering (src/pages/WebhookDeliveries.tsx):
  • Uses window.matchMedia('(max-width: 639px)') to switch cleanly between the <article> card stack below 640px and the desktop <table> at >= 640px.
  • Adds scope="col" to all 7 desktop <th> table headers.
• Mobile delivery cards (<article>):
  • Status badge with visual indicator + text.
  • Monospace delivery ID (<code>) with a Copy button.
  • Webhook URL formatted as host + truncated path with overflow-wrap: anywhere and the full URL preserved in both title and aria-label.
  • Attempt count and relative timestamp inside <time dateTime={...} title={absoluteTime}>.
  • Details disclosure button (aria-expanded, aria-controls) that toggles vertically stacked DeliveryDetailContent.
  • Retry action rendered only on failed deliveries, preserving idempotent retry handling and disabling the button while retrying to prevent double retries.
• Focusable JSON containers & responsive styles (src/index.css):
  • JSON payload blocks scroll internally inside .webhook-json-scroll (tabIndex={0}, role="region", aria-label) so keyboard users can scroll long payloads without causing horizontal page overflow at 320px / 375px.
  • Keeps the status filter <select> and Refresh button usable down to 320px.
• Tests (src/pages/WebhookDeliveries.test.tsx):
  • Added all 8 test scenarios covering mobile media query rendering, desktop th[scope="col"] count, Details disclosure toggling, idempotent Retry / double-click prevention, absence of Retry on delivered cards, 300-char URL truncation + accessible naming, focusable JSON regions, and mobile status filtering.

Verification & Test Output

• npx tsc -p tsconfig.json --noEmit — passed
• npm run build — passed
• npx vitest run — passed

 RUN  v1.6.1

 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > renders loading state, then authoritative state
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > renders explicit errors from a mocked fetcher
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > reloads deliveries from the active account and clears previous rows on switch
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > does not render production account simulation controls
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > never reports unconfirmed mutations as successful during retry
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > announces the loading state with role=status
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > announces mocked fetch errors with role=alert and a semantic danger class
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > marks the stale data region busy and uses token-based warning classes
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > Responsive card layout below 640px (#1322) > renders expandable article cards and no table when below 640px
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > Responsive card layout below 640px (#1322) > renders a table with 7 th[scope="col"] headers on desktop and no articles
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > Responsive card layout below 640px (#1322) > toggles card Details disclosure and reveals stacked payload content
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > Responsive card layout below 640px (#1322) > disables Retry while retrying on a failed card and prevents double retry
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > Responsive card layout below 640px (#1322) > does not render a Retry button on delivered cards
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > Responsive card layout below 640px (#1322) > truncates visible text for a 300-character URL while preserving the full URL in title and accessible name
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > Responsive card layout below 640px (#1322) > renders JSON payload blocks inside focusable containers with accessible labels
 ✓ src/pages/WebhookDeliveries.test.tsx > WebhookDeliveries Page > Responsive card layout below 640px (#1322) > filters cards by status on mobile just like on desktop

 Test Files  1 passed (1)
      Tests  16 passed (16)

[drips-wave]

@chuks68 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