Fix full-screen modal close button position

components/FullscreenImage.tsx

@@ -4,6 +4,7 @@ import { memo, useState } from "react";
 import { Pressable, useWindowDimensions, View } from "react-native";
 import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
 import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { Icon } from "@/components/ui/icon";
 import { Modal, ModalBackdrop, ModalCloseButton, ModalContent } from "@/components/ui/modal";
@@ -26,6 +27,7 @@ export const FullscreenImage = memo(
     const translateY = useSharedValue(0);
     const savedTranslateX = useSharedValue(0);
     const savedTranslateY = useSharedValue(0);
+    const insets = useSafeAreaInsets();
 
     // Calculate scales and boundaries based on actual image dimensions
     const imageAspectRatio = imageSize.width / imageSize.height;
@@ -97,7 +99,7 @@ export const FullscreenImage = memo(
           <ModalContent className="m-0 h-full w-full rounded-none border-0 bg-background-dark p-0">
             <View className="relative flex-1">
               <ModalCloseButton
-                className="absolute right-4 top-4 z-10 rounded-full bg-background-0/80 p-2 active:bg-secondary-100"
+                className={`absolute right-4 top-[${insets.top}px] z-10 mt-2 rounded-full bg-background-0/80 p-2 active:bg-secondary-100`}
                 onPress={() => {
                   setIsFullscreenOpen(false);
                   scale.value = 1;