Toasters progress bar stops on mobile when clicked (#1217)

[gmpaliwal07]

What: Prevents the toast progress bar from pausing when tapped on mobile devices, ensuring the toast auto-closes as expected. Keeps the hover-to-pause behavior on desktop.

Why: Fixes issue #1217 where tapping a toast on mobile paused the progress bar, preventing auto-close.

How: Added isMobile utility to detect mobile devices. Updated useToast to skip pauseOnHover logic on mobile in both eventHandlers and onDragTransitionEnd.

Testing: Tested in the playground demo on mobile emulation (Chrome) and desktop. Confirmed the progress bar continues on mobile tap and pauses on desktop hover.

Fixes #1217

[gmpaliwal07]

Hey @fkhadra can you just review and merge I have solved this issue and tested on the local machine too

[NekoSakuraLucia]

LGTM >-<

[gmpaliwal07]

Can you please Merge it

[NekoSakuraLucia]

Can you please Merge it

Sorry, I can’t merge it myself. We’ll have to wait for the collaborator to do the merge. @gmpaliwal07

[Link2Twenty]

@fkhadra do you want touch taps to pause the toast?

If you don't I think the fix should be as simple as

https://github.com/fkhadra/react-toastify/blob/main/src/hooks/useToast.ts#L81-L96

becomes

function onDragTransitionEnd(e: React.PointerEvent<HTMLElement>) {
  const { top, bottom, left, right } = toastRef.current!.getBoundingClientRect();

  if (
    e.nativeEvent.pointerType !== 'touch' &&
    props.pauseOnHover &&
    e.clientX >= left &&
    e.clientX <= right &&
    e.clientY >= top &&
    e.clientY <= bottom
  ) {
    pauseToast();
  } else {
    playToast();
  }
}