🚸(frontend) disable toast notifications on mobile

Due to responsiveness issues and awkward display on mobile screens.

Note: Chrome inspector's responsive mode inaccurately triggers mobile
behavior. It uses a temporary function imported from LiveKit.

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -4,12 +4,15 @@ import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
 import { Div } from '@/primitives'
+import { isMobileBrowser } from '@livekit/components-core/src/helper/detectMobileBrowser.ts'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
-  // fixme - don't show toast on mobile screen
   useEffect(() => {
     const showJoinNotification = (participant: Participant) => {
+      if (isMobileBrowser()) {
+        return
+      }
       toastQueue.add(
         {
           participant,
@@ -54,6 +57,9 @@ export const MainNotificationToast = () => {
       if (!participant) {
         return
       }
+      if (isMobileBrowser()) {
+        return
+      }
       const notification = decoder.decode(payload)
       const existingToast = toastQueue.visibleToasts.find(
         (toast) =>