From f653faab942197dff008c4f717979ec794e45b23 Mon Sep 17 00:00:00 2001
From: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
Date: Thu, 21 May 2026 10:32:35 -0700
Subject: [PATCH] Fix word wrapping in image menu on Android (#10577)

---
 src/components/Lightbox/chrome/ImageMenu.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Lightbox/chrome/ImageMenu.tsx b/src/components/Lightbox/chrome/ImageMenu.tsx
index c677e6d491..9e1838c593 100644
--- a/src/components/Lightbox/chrome/ImageMenu.tsx
+++ b/src/components/Lightbox/chrome/ImageMenu.tsx
@@ -8,10 +8,9 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
-import {atoms as a} from '#/alf'
+import {android, atoms as a, ios} from '#/alf'
 import {ArrowShareRight_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowShareRight'
 import {type Props as IconProps} from '#/components/icons/common'
 import {DotGrid3x1_Stroke2_Corner0_Rounded as DotsIcon} from '#/components/icons/DotGrid'
@@ -36,7 +35,7 @@ const SPRING_IN = {damping: 18, mass: 0.6, stiffness: 240}
 const TIMING_OUT = {duration: 150}
 
 export function ImageMenu({onPressShare, onPressSave}: Props) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const triggerRef = useRef<View>(null)
   const [isMounted, setIsMounted] = useState(false)
   const [anchor, setAnchor] = useState<Anchor | null>(null)
@@ -71,7 +70,7 @@ export function ImageMenu({onPressShare, onPressSave}: Props) {
         <CircleChromeButton
           icon={DotsIcon}
           iconStyle={{transform: [{rotate: '90deg'}]}}
-          label={_(msg`Image options`)}
+          label={l`Image options`}
           onPress={open}
         />
       </View>
@@ -83,7 +82,7 @@ export function ImageMenu({onPressShare, onPressSave}: Props) {
         statusBarTranslucent>
         <Pressable
           accessibilityRole="button"
-          accessibilityLabel={_(msg`Close menu`)}
+          accessibilityLabel={l`Close menu`}
           accessibilityHint=""
           style={StyleSheet.absoluteFill}
           onPress={close}
@@ -92,12 +91,12 @@ export function ImageMenu({onPressShare, onPressSave}: Props) {
           <MenuCard anchor={anchor} progress={progress}>
             <MenuItem
               icon={ShareIcon}
-              label={_(msg`Share image`)}
+              label={l`Share image`}
               onPress={() => runAction(onPressShare)}
             />
             <MenuItem
               icon={DownloadIcon}
-              label={_(msg`Save image`)}
+              label={l`Save image`}
               onPress={() => runAction(onPressSave)}
             />
           </MenuCard>
@@ -126,6 +125,8 @@ function MenuCard({
       style={[
         a.absolute,
         styles.card,
+        android({alignSelf: 'flex-start'}),
+        ios({width: MENU_WIDTH}),
         {
           top: anchor.y + anchor.height + GAP,
           left: anchor.x,
@@ -162,7 +163,6 @@ function MenuItem({
 
 const styles = StyleSheet.create({
   card: {
-    width: MENU_WIDTH,
     padding: 8,
     borderRadius: 16,
     borderWidth: 0.5,