From 0df1d6f53e1ada2efd0e6a2de2580e378f951fd8 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 21 Apr 2026 09:24:46 -0700
Subject: [PATCH] [Chat] Message context menu fixes (#10314)

---
 src/components/ContextMenu/index.tsx       | 25 ++++++++++++++++------
 src/components/ContextMenu/types.ts        |  1 +
 src/components/dms/EmojiReactionPicker.tsx |  9 +++++---
 src/components/dms/MessageItemEmbed.tsx    |  1 -
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx
index ea4badde82..8450c47bbe 100644
--- a/src/components/ContextMenu/index.tsx
+++ b/src/components/ContextMenu/index.tsx
@@ -54,7 +54,7 @@ import {HITSLOP_10} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {logger} from '#/logger'
-import {atoms as a, platform, tokens, useTheme} from '#/alf'
+import {atoms as a, flatten, platform, tokens, useTheme} from '#/alf'
 import {
   Context,
   ItemContext,
@@ -527,7 +527,8 @@ export function AuxiliaryView({
     }
   })
 
-  const menuContext = useMemo(() => ({align}), [align])
+  const xOffset = (flatten(style)?.marginLeft as number) ?? 0
+  const menuContext = useMemo(() => ({align, xOffset}), [align, xOffset])
 
   const onLayout = useCallback(() => {
     if (!measurement) return
@@ -655,7 +656,8 @@ export function Outer({
     [context.measurement, frame.height, insets, translationSV],
   )
 
-  const menuContext = useMemo(() => ({align}), [align])
+  const xOffset = (flatten(style)?.marginLeft as number) ?? 0
+  const menuContext = useMemo(() => ({align, xOffset}), [align, xOffset])
 
   if (!context.isOpen || !context.measurement) return null
 
@@ -763,7 +765,7 @@ export function Item({
     onOut: onPressOut,
   } = useInteractionState()
   const id = useId()
-  const {align} = useContextMenuMenuContext()
+  const {align, xOffset: menuXOffset} = useContextMenuMenuContext()
 
   const {close, measurement, registerHoverable} = context
 
@@ -779,8 +781,8 @@ export function Item({
       const xOffset = position
         ? position.x
         : align === 'left'
-          ? measurement.x
-          : measurement.x + measurement.width - layout.width
+          ? measurement.x + menuXOffset
+          : measurement.x + measurement.width - layout.width - menuXOffset
 
       registerHoverable(
         id,
@@ -796,7 +798,16 @@ export function Item({
         },
       )
     },
-    [id, measurement, registerHoverable, close, onPress, align, position],
+    [
+      id,
+      measurement,
+      registerHoverable,
+      close,
+      onPress,
+      align,
+      menuXOffset,
+      position,
+    ],
   )
 
   const itemContext = useMemo(
diff --git a/src/components/ContextMenu/types.ts b/src/components/ContextMenu/types.ts
index e2f1522d1e..0837a23044 100644
--- a/src/components/ContextMenu/types.ts
+++ b/src/components/ContextMenu/types.ts
@@ -65,6 +65,7 @@ export type ContextType = {
 
 export type MenuContextType = {
   align: 'left' | 'right'
+  xOffset: number
 }
 
 export type ItemContextType = {
diff --git a/src/components/dms/EmojiReactionPicker.tsx b/src/components/dms/EmojiReactionPicker.tsx
index 99cc3a4b29..8049297661 100644
--- a/src/components/dms/EmojiReactionPicker.tsx
+++ b/src/components/dms/EmojiReactionPicker.tsx
@@ -33,7 +33,7 @@ export function EmojiReactionPicker({
   const t = useTheme()
   const isFromSelf = message.sender?.did === currentAccount?.did
   const {measurement, close} = useContextMenuContext()
-  const {align} = useContextMenuMenuContext()
+  const {align, xOffset} = useContextMenuMenuContext()
   const [layout, setLayout] = useState({width: 0, height: 0})
   const {width: screenWidth} = useWindowDimensions()
 
@@ -44,12 +44,15 @@ export function EmojiReactionPicker({
 
   const position = useMemo(() => {
     return {
-      x: align === 'left' ? 12 : screenWidth - layout.width - 12,
+      x:
+        align === 'left'
+          ? (measurement?.x ?? 0) + xOffset
+          : (measurement?.x ?? 0) + (measurement?.width ?? 0) - layout.width,
       y: (measurement?.y ?? 0) - tokens.space.xs - layout.height,
       height: layout.height,
       width: layout.width,
     }
-  }, [measurement, align, screenWidth, layout])
+  }, [measurement, align, xOffset, screenWidth, layout])
 
   const limitReacted = hasReachedReactionLimit(message, currentAccount?.did)
 
diff --git a/src/components/dms/MessageItemEmbed.tsx b/src/components/dms/MessageItemEmbed.tsx
index 771281fbc7..7fce36530d 100644
--- a/src/components/dms/MessageItemEmbed.tsx
+++ b/src/components/dms/MessageItemEmbed.tsx
@@ -29,7 +29,6 @@ let MessageItemEmbed = ({
       <View
         style={[
           !isFromSelf && a.ml_sm,
-          t.atoms.bg,
           native({
             flexBasis: 0,
             width: Math.min(screen.width, 600) / 1.4,