more menu

src/components/MoreMenu.js

@@ -12,6 +12,7 @@ import { Portal } from "@gorhom/portal";
 const MoreMenu = ({
   visible = false,
   top = 0,
+  position = null,
   onClose = () => {},
   inPlaylist = false,
   playlistId = null,
@@ -21,6 +22,17 @@ const MoreMenu = ({
   const { setTooltip } = useMinuit();
   if (!visible) return null;
 
+  const resolvedTop =
+    typeof position?.top === "number"
+      ? position.top
+      : typeof top === "number"
+      ? top
+      : 0;
+  const resolvedRight =
+    typeof position?.right === "number" ? Math.max(position.right, 0) : null;
+  const resolvedLeft =
+    typeof position?.left === "number" ? Math.max(position.left, 0) : null;
+
   const removeFromPlaylist = async () => {
     try {
       if (inPlaylist && playlistId && projectId) {
@@ -49,6 +61,21 @@ const MoreMenu = ({
     onClose?.();
   };
 
+  const anchorStyle = {
+    position: "absolute",
+    top: resolvedTop,
+    zIndex: 2,
+    elevation: 2,
+  };
+
+  if (resolvedRight != null) {
+    anchorStyle.right = resolvedRight;
+  } else if (resolvedLeft != null) {
+    anchorStyle.left = resolvedLeft;
+  } else {
+    anchorStyle.right = 0;
+  }
+
   return (
     <Portal>
       <View
@@ -77,13 +104,7 @@ const MoreMenu = ({
         <Animated.View
           entering={FadeIn.duration(300).easing(Easing.ease)}
           exiting={FadeOut.duration(300).easing(Easing.ease)}
-          style={{
-            position: "absolute",
-            right: 0,
-            top,
-            zIndex: 2,
-            elevation: 2,
-          }}
+          style={anchorStyle}
         >
           <View style={{ gap: 2 }}>
             {inPlaylist && (