fix: literally fix the notification component

renderer/viewer/lib/ui/newStats.ts

@@ -15,7 +15,7 @@ export const addNewStat = (id: string, width = 80, x = rightOffset, y = lastY) =
   pane.style.padding = '2px'
   pane.style.fontFamily = 'monospace'
   pane.style.fontSize = '12px'
-  pane.style.zIndex = '10000'
+  pane.style.zIndex = '100'
   pane.style.pointerEvents = 'none'
   document.body.appendChild(pane)
   stats[id] = pane

src/react/Notification.tsx

@@ -58,7 +58,9 @@ export default ({ type = 'message', message, subMessage = '', open, icon = '', a
           gap: 2,
         }}
         >
-          <div>
+          <div style={{
+            whiteSpace: 'normal',
+          }}>
             {message}
           </div>
           <div style={{

src/react/NotificationProvider.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
 import { proxy, useSnapshot } from 'valtio'
+import { useAppScale } from '../scaleInterface'
 import Notification from './Notification'
 
 type NotificationType = React.ComponentProps<typeof Notification> & {
@@ -34,6 +35,7 @@ export const showNotification = (
   notificationProxy.autoHide = autoHide
   notificationProxy.action = action
 }
+globalThis.showNotification = showNotification
 export const hideNotification = () => {
   // openNotification('') // reset
   notificationProxy.open = false
@@ -56,13 +58,19 @@ export default () => {
   //     openNotification('test', 'test', false, 'message')
   //   }, 1000)
   // }, [])
+  const scale = useAppScale()
 
-  return <Notification
-    action={action}
-    type={type}
-    message={message}
-    subMessage={subMessage}
-    open={open}
-    icon={icon}
-  />
+  return <div style={{
+    scale,
+    transformOrigin: 'top right',
+  }}>
+    <Notification
+      action={action}
+      type={type}
+      message={message}
+      subMessage={subMessage}
+      open={open}
+      icon={icon}
+    />
+  </div>
 }

src/reactUi.tsx

@@ -202,7 +202,6 @@ const App = () => {
             <ServersListProvider />
             <OptionsRenderApp />
             <MainMenuRenderApp />
-            <NotificationProvider />
             <TouchAreasControlsProvider />
             <SignInMessageProvider />
             <NoModalFoundProvider />
@@ -213,6 +212,7 @@ const App = () => {
             </div>
             <div />
             <DebugEdges />
+            <NotificationProvider />
           </RobustPortal>
         </ButtonAppProvider>
       </div>