[Thosine-01]

Summary

Closes #1513

Makes the webhook delivery detail view mobile-friendly. On phones it now opens as a bottom drawer you can swipe down to close and swipe sideways to browse deliveries. On desktop it stays a centered dialog. Every gesture also has a button and a keyboard equivalent.

What changed

Responsive drawer (WebhookDetailModal.tsx)

• Opens as a bottom sheet with a drag handle below sm and as a centered dialog from sm up
• Opening animations (drawer-in slide-up, dialog-in scale) only run under motion-safe
• Uses 90dvh max height and env(safe-area-inset-bottom) padding so content clears the iOS home indicator
• Shows the delivery time, which the table hides on mobile

Touch gestures

• Swipe down to dismiss: the drawer follows the finger and the backdrop fades. It closes after a 120px drag or a fast flick (≥ 0.5 px/ms). Otherwise it snaps back.
• Scroll-safe: dragging down inside the content only moves the drawer when the content is scrolled to the top, so normal scrolling isn't hijacked
• Swipe left/right: goes to the next/previous delivery. The drawer nudges sideways as a hint, and the header shows the position, e.g. "Delivery 2 of 12".
• Code blocks are protected: sideways swipes on the JSON payload scroll the code instead of switching deliveries
• Each touch locks to one axis after 10px, so diagonal movement doesn't trigger both actions
• The swipe decision logic is a pure, exported resolveSwipe() function with documented thresholds, which makes it easy to unit test and tune

Accessibility

• Every gesture has a non-gesture alternative, per WCAG 2.5.1: a close button, Escape, Previous / Next buttons and ← / → arrow keys
• role="dialog", aria-modal, and the dialog is labelled by its heading
• Focus moves into the dialog on open, is trapped while it's open, and returns to the triggering row on close
• Body scroll is locked while the drawer is open
• Position changes are announced via aria-live="polite"
• Touch targets are 44×44px on mobile; nav buttons are disabled at the ends of the list

Table (WebhookLogs.tsx)

• Passes onPrevious / onNext / positionLabel to the drawer
• touch-manipulation removes the tap delay, and rows highlight when tapped

Files

• frontend/src/components/WebhookDetailModal.tsx: responsive drawer, gestures, keyboard handling, focus management
• frontend/src/components/WebhookDetailModal.test.tsx: new, 15 tests
• frontend/src/components/WebhookLogs.tsx: navigation wiring and tap behaviour
• frontend/src/components/WebhookLogs.test.tsx: navigation test; the drawer mock now renders a stub that exposes the nav handlers
• frontend/tailwind.config.js: drawer-in / dialog-in keyframes

Testing

npx vitest run src/components/WebhookDetailModal.test.tsx src/components/WebhookLogs.test.tsx: 20/20 passing. Type check and lint are clean.

New test coverage:

• resolveSwipe: long drag, fast flick, slow short drag, upward drag, horizontal next/previous
• Swiping past the threshold dismisses the drawer
• The drawer follows the finger while dragging and snaps back on a short drag
• No dismiss when dragging inside scrolled content
• Swiping left/right navigates between deliveries
• Sideways swipes inside the payload don't navigate
• Button and keyboard alternatives work
• Nav buttons are disabled at the ends of the list
• Body scroll is locked and restored
• Tapping the backdrop closes the drawer
• The table passes next/previous handlers and the position through correctly

Manual testing

• iOS Safari: swipe down, swipe sideways, safe-area padding
• Android Chrome
• Desktop: Chrome / Firefox / Safari (dialog layout, arrow keys, Escape, focus return)
• Reduced motion enabled
• Lighthouse / axe accessibility audit

Screenshots

	Mobile	Desktop
Drawer open
Mid-swipe (dismiss)		n/a
Swipe to next delivery		n/a

Notes

This PR and # (optimistic rollback) both edit WebhookLogs.tsx and WebhookLogs.test.tsx, so whichever merges second will probably need a small conflict resolved.

🤖 Generated with Claude Code

[vercel]

@Thosine-01 is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[gitguardian]

⚠️ GitGuardian has uncovered 3 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secrets in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
38865302	Triggered	Generic High Entropy Secret	9648d60	backend/src/lib/sep0001-generator.sanitization.test.js	View secret
38865486	Triggered	Generic High Entropy Secret	9648d60	backend/src/lib/websocket-relay-retry.test.js	View secret
38864685	Triggered	Generic High Entropy Secret	9648d60	backend/src/lib/exchange-rate-oracle-sanitizer.test.js	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secrets safely. Learn here the best practices.
3. Revoke and rotate these secrets.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}