try to put it on/near the resizable

js/components/src/components/stream-notification/stream-notification-manager.ts

···
 export type NotificationConfig = {
   id?: string;
   message?: string;
-  render?: (isExiting: boolean, onDismiss: () => void) => React.ReactNode;
+  render?: (
+    isExiting: boolean,
+    onDismiss: () => void,
+    startTime?: number,
+  ) => React.ReactNode;
   duration?: number; // seconds, 0 = manual dismiss only
   actionLabel?: string;
   onAction?: () => void;
···
   visible: boolean;
   shouldDismiss?: boolean;
   dismissReason?: "user" | "auto";
+  startTime?: number;
 };
 
 type Listener = (notifications: StreamNotification[]) => void;
···
       onAutoDismiss: config.onAutoDismiss,
       variant: config.variant ?? "default",
       visible: true,
+      startTime: Date.now(),
     };
 
     // if notification with same ID exists, dismiss it first

js/components/src/components/stream-notification/stream-notification.tsx

···
       ]}
     >
       {notification.render ? (
-        notification.render(isExiting, handleDismiss)
+        notification.render(isExiting, handleDismiss, notification.startTime)
       ) : (
         <View style={styles.content}>
           <Text style={[styles.message, { color: theme.colors.foreground }]}>

js/components/src/components/stream-notification/teleport-notification.tsx

···
 import { useEffect, useState } from "react";
-import { View } from "react-native";
+import { useWindowDimensions, View } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
···
 export function TeleportNotification({
   targetHandle,
   countdown,
+  startTime,
   onDismiss,
 }: {
   targetHandle: string;
   countdown: number;
+  startTime?: number;
   onDismiss: () => void;
 }) {
   const { zero: z } = useTheme();
-  const [showStripes, setShowStripes] = useState(true);
-  const [timeLeft, setTimeLeft] = useState(countdown);
+  const w = useWindowDimensions().width;
+
+  // calculate initial time left based on start time
+  const initialTimeLeft = startTime
+    ? Math.max(0, countdown - Math.floor((Date.now() - startTime) / 1000))
+    : countdown;
+  const [timeLeft, setTimeLeft] = useState(initialTimeLeft);
+
+  // if we're past 5 seconds from start, stripes should already be hidden
+  const elapsedTime = startTime ? (Date.now() - startTime) / 1000 : 0;
+  const [showStripes, setShowStripes] = useState(elapsedTime < 5);
 
   const stripeX = useSharedValue(0);
   const stripeOpacity = useSharedValue(1);
   const progressWidth = useSharedValue(100);
 
   useEffect(() => {
+    // if stripes are already hidden, fade out asap and return
+    if (!showStripes) {
+      stripeOpacity.value = withTiming(0, { duration: 0 });
+      return;
+    }
     // warning stripes animation
     stripeX.value = withRepeat(
       withTiming(30 * 2, {
···
       // after animation, set stripes as hidden
       setTimeout(() => {
         setShowStripes(false);
-      }, 500);
+      }, 350);
     }, 1500);
 
     return () => clearTimeout(stripesTimer);
···
           zero.layout.flex.alignCenter,
           zero.layout.flex.spaceBetween,
           zero.px[3],
-          zero.py[4],
+          w > 650 ? zero.py[4] : zero.py[2],
         ]}
       >
-        <Text size="xl">Teleporting to @{targetHandle}</Text>
+        <Text size={w > 650 ? "xl" : "base"}>
+          Teleporting to @{targetHandle}
+        </Text>
         <View
           style={[
             zero.layout.flex.row,

js/components/src/components/ui/resizeable.tsx

···
 import Animated, {
   Extrapolation,
   interpolate,
+  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
···
   const sheetHeight = useSharedValue(MIN_HEIGHT);
   const startHeight = useSharedValue(MIN_HEIGHT);
   const [isCollapsed, setIsCollapsed] = useState(true);
+  const wasCollapsed = useSharedValue(true);
 
   useEffect(() => {
     setTimeout(() => {
···
       if (newHeight < MIN_HEIGHT) newHeight = MIN_HEIGHT;
       sheetHeight.value = newHeight;
 
-      if (newHeight < COLLAPSE_HEIGHT) {
+      const nowCollapsed = newHeight < COLLAPSE_HEIGHT;
+      if (nowCollapsed && !wasCollapsed.value) {
         sheetHeight.value = withSpring(MIN_HEIGHT, SPRING_CONFIG);
-        setIsCollapsed(true);
-      } else {
-        setIsCollapsed(false);
+        wasCollapsed.value = true;
+        runOnJS(setIsCollapsed)(true);
+      } else if (!nowCollapsed && wasCollapsed.value) {
+        wasCollapsed.value = false;
+        runOnJS(setIsCollapsed)(false);
       }
     });
 
···
         {children}
       </AnimatedView>
       <Animated.View
-        style={[aboveElementStyle, { width: "100%", pointerEvents: "none" }]}
+        style={[
+          aboveElementStyle,
+          {
+            width: "100%",
+            pointerEvents: "none",
+            position: "absolute",
+            bottom: 0,
+          },
+        ]}
       >
         <View style={{ pointerEvents: "auto" }}>
           {renderAbove?.(isCollapsed)}

js/components/src/lib/stream-notifications.ts

···
   }) => {
     streamNotification.show({
       id: "teleport",
-      render: (isExiting, onDismiss) => {
+      render: (isExiting, onDismiss, startTime) => {
         return React.createElement(TeleportNotification, {
           targetHandle: params.targetHandle,
           countdown: params.countdown,
+          startTime: startTime,
           onDismiss: () => {
             params.onCancel?.();
             onDismiss();
           },
         });
       },
-      // allow some extra time for the countdown animation to finish
-      duration: 30 + 7,
+      duration: 30 + 2, // manually dismissed by countdown or user cancel
       variant: "warning",
       onUserDismiss: params.onCancel,
     });