fix(suite-native): align toasts vertically with the close icon

suite-native/toasts/package.json

@@ -12,12 +12,12 @@
     "dependencies": {
         "@mobily/ts-belt": "^3.13.1",
         "@suite-native/atoms": "workspace:*",
-        "@suite-native/connection-status": "workspace:*",
         "@suite-native/icons": "workspace:*",
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",
         "jotai": "1.9.1",
         "react": "18.2.0",
-        "react-native-reanimated": "3.16.1"
+        "react-native-reanimated": "3.16.1",
+        "react-native-safe-area-context": "4.14.0"
     }
 }

suite-native/toasts/src/components/ToastRenderer.tsx

@@ -1,25 +1,27 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 import { useAtomValue } from 'jotai';
 
-import { useOfflineBannerAwareSafeAreaInsets } from '@suite-native/connection-status';
 import { Box, VStack } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { toastsAtom } from '../toastsAtoms';
 import { Toast } from './Toast';
 
 const toastsContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
-    (utils, { topSafeAreaInset }) => ({
+    ({ spacings }, { topSafeAreaInset }) => ({
         width: '100%',
         position: 'absolute',
         justifyContent: 'center',
-        marginTop: topSafeAreaInset,
-        paddingHorizontal: utils.spacings.sp16,
+        // top margin = screen top padding + screen header top padding
+        marginTop: Math.max(topSafeAreaInset, spacings.sp8) + spacings.sp8,
+        paddingHorizontal: spacings.sp16,
     }),
 );
 
 export const ToastRenderer = () => {
     const { applyStyle } = useNativeStyles();
-    const { top: topSafeAreaInset } = useOfflineBannerAwareSafeAreaInsets();
+    const { top: topSafeAreaInset } = useSafeAreaInsets();
     const toasts = useAtomValue(toastsAtom);
 
     return (

suite-native/toasts/tsconfig.json

@@ -3,7 +3,6 @@
     "compilerOptions": { "outDir": "libDev" },
     "references": [
         { "path": "../atoms" },
-        { "path": "../connection-status" },
         { "path": "../icons" },
         { "path": "../../packages/styles" },
         { "path": "../../packages/theme" }

yarn.lock

@@ -11161,13 +11161,13 @@ __metadata:
   dependencies:
     "@mobily/ts-belt": "npm:^3.13.1"
     "@suite-native/atoms": "workspace:*"
-    "@suite-native/connection-status": "workspace:*"
     "@suite-native/icons": "workspace:*"
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"
     jotai: "npm:1.9.1"
     react: "npm:18.2.0"
     react-native-reanimated: "npm:3.16.1"
+    react-native-safe-area-context: "npm:4.14.0"
   languageName: unknown
   linkType: soft