add a wep specific wrapper

src/components/dms/ActionsWrapper.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react'
-import {Pressable} from 'react-native'
+import {Pressable, View} from 'react-native'
 import Animated, {
   cancelAnimation,
   runOnJS,
@@ -9,13 +9,16 @@ import Animated, {
 } from 'react-native-reanimated'
 
 import {useHaptics} from 'lib/haptics'
+import {atoms as a} from '#/alf'
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
 
-export const GrowWrapper = function GrowWrapper({
+export const ActionsWrapper = function GrowWrapper({
+  isFromSelf,
   onOpenMenu,
   children,
 }: {
+  isFromSelf: boolean
   onOpenMenu: () => unknown
   children: React.ReactNode
 }) {
@@ -49,6 +52,13 @@ export const GrowWrapper = function GrowWrapper({
   }, [scale, animationDidComplete, playHaptic, onOpenMenu, shrink])
 
   return (
+    <View
+      style={[
+        {
+          maxWidth: '65%',
+        },
+        isFromSelf ? a.self_end : a.self_start,
+      ]}>
       <AnimatedPressable
         style={animatedStyle}
         unstable_pressDelay={200}
@@ -56,5 +66,6 @@ export const GrowWrapper = function GrowWrapper({
         onTouchEnd={shrink}>
         {children}
       </AnimatedPressable>
+    </View>
   )
 }

src/components/dms/ActionsWrapper.web.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {View} from 'react-native'
+
+export function ActionsWrapper({
+  isFromSelf,
+  onOpenMenu,
+  children,
+}: {
+  isFromSelf: boolean
+  onOpenMenu: () => unknown
+  children: React.ReactNode
+}) {
+  return <View>{children}</View>
+}

src/components/dms/MessageItem.tsx

@@ -4,7 +4,7 @@ import {ChatBskyConvoDefs} from '@atproto-labs/api'
 
 import {useSession} from 'state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {GrowWrapper} from '#/components/dms/GrowWrapper'
+import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
 import {MessageItemMetadata} from '#/components/dms/MesageItemMetadata'
 import {MessageMenu} from '#/components/dms/MessageMenu'
 import {useMenuControl} from '#/components/Menu'
@@ -56,14 +56,7 @@ export function MessageItem({
   }, [menuControl])
 
   return (
-    <View
+    <ActionsWrapper onOpenMenu={onOpenMenu} isFromSelf={isFromSelf}>
-      style={[
-        {
-          maxWidth: '65%',
-        },
-        isFromSelf ? a.self_end : a.self_start,
-      ]}>
-      <GrowWrapper onOpenMenu={onOpenMenu}>
       <View
         style={[
           a.py_sm,
@@ -95,7 +88,6 @@ export function MessageItem({
         style={isFromSelf ? a.text_right : a.text_left}
       />
       <MessageMenu message={item} control={menuControl} />
-      </GrowWrapper>
+    </ActionsWrapper>
-    </View>
   )
 }