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:
@@ -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) }}
|
||||
|
||||
Reference in New Issue
Block a user