fix(perps): render perps toast via portal to escape CSS transform containing block

ui/components/app/perps/perps-toast/perps-toast-provider.test.tsx

@@ -648,4 +648,23 @@ describe('PerpsToastProvider', () => {
       screen.queryByText(messages.perpsToastMarginAdjustmentFailed.message),
     ).not.toBeInTheDocument();
   });
+
+  it('renders the toast via portal to document.body, not inside the provider subtree', () => {
+    const { container } = renderWithProvider(
+      <PerpsToastProvider>
+        <ToastHarness />
+      </PerpsToastProvider>,
+      getStore(),
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show Info' }));
+
+    expect(screen.getByText('Submitting order...')).toBeInTheDocument();
+    expect(
+      container.querySelector('[data-testid="perps-toast"]'),
+    ).not.toBeInTheDocument();
+    expect(
+      document.body.querySelector('[data-testid="perps-toast"]'),
+    ).toBeInTheDocument();
+  });
 });

ui/components/app/perps/perps-toast/perps-toast-provider.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
   type ReactNode,
 } from 'react';
+import ReactDOM from 'react-dom';
 import { Box } from '@metamask/design-system-react';
 import { Toast } from '../../../multichain/toast';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
@@ -170,22 +171,25 @@ export const PerpsToastProvider = ({ children }: PerpsToastProviderProps) => {
   return (
     <PerpsToastContext.Provider value={contextValue}>
       {children}
-      {activeToast ? (
-        <Box className="toasts-container bottom-20 w-[calc(100%-32px)] max-w-[408px]">
-          <Toast
-            key={activeToast.id}
-            startAdornment={getPerpsToastIcon(activeToast.presentation)}
-            text={activeToast.message}
-            description={activeToast.description}
-            className="perps-toast"
-            contentProps={{ className: 'items-center' }}
-            autoHideTime={activeToast.autoHideTime}
-            onClose={hidePerpsToast}
-            onAutoHideToast={hidePerpsToast}
-            dataTestId={activeToast.dataTestId ?? 'perps-toast'}
-          />
-        </Box>
-      ) : null}
+      {activeToast
+        ? ReactDOM.createPortal(
+            <Box className="toasts-container bottom-20 w-[calc(100%-32px)] max-w-[408px]">
+              <Toast
+                key={activeToast.id}
+                startAdornment={getPerpsToastIcon(activeToast.presentation)}
+                text={activeToast.message}
+                description={activeToast.description}
+                className="perps-toast"
+                contentProps={{ className: 'items-center' }}
+                autoHideTime={activeToast.autoHideTime}
+                onClose={hidePerpsToast}
+                onAutoHideToast={hidePerpsToast}
+                dataTestId={activeToast.dataTestId ?? 'perps-toast'}
+              />
+            </Box>,
+            document.body,
+          )
+        : null}
     </PerpsToastContext.Provider>
   );
 };