Improve drag performance for meeting alerts on touch devices

Apply `touch-action: none` to the drag handle and `pointer-events: none` to the ping animation overlay in `upcoming-meeting-alert.tsx` to fix drag stuttering on iPad.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4114b48d-7679-479b-a57c-9c2f1ab9674b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/W25NwW4
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-05-07 13:28:28 +00:00
parent ee0344a9d3
commit 2ac659bf23
@@ -569,12 +569,27 @@ export function UpcomingMeetingAlert() {
onPointerCancel={onDragEnd}
data-testid="alert-drag-handle"
aria-label={t("executiveMeetings.alert.dragHandle")}
// #441: On touch devices (iPad/Safari) the browser's
// default touch-action treats a finger drag on the handle
// as a candidate scroll gesture and swallows the
// pointermove events before our handler can run, causing
// the alert to stutter or refuse to follow the finger.
// `touch-action: none` tells the browser we're handling
// the gesture ourselves so it delivers every move.
style={{ touchAction: "none" }}
>
{/* #438: pulsing accent halo around the drag handle to
match the incoming-note popup's avatar ping. Inline
background uses the user's accent so it tracks any
preset. */}
<span className="relative inline-flex h-4 w-4 shrink-0 items-center justify-center">
<span
className="relative inline-flex h-4 w-4 shrink-0 items-center justify-center"
// #441: the ping halo overlays the GripVertical icon, so
// without `pointer-events: none` it can intercept the
// finger touch on iPad and prevent the drag from
// starting on the handle below it.
style={{ pointerEvents: "none" }}
>
<span
className="absolute inset-0 rounded-full animate-ping"
style={{ backgroundColor: hexToRgba(alertPrefs.accent, 0.6) }}