ComposeMenu: Remove a negative margin; don't make touch targets overlap

With padding 12 (and no negative margin), each button's touch target
is 12 + 24 + 12 = 48, and they don't overlap with each other. (The
24 is the icon's width.)

We try to keep touch targets 48px minimum so they're not too hard to
hit.

This makes them take up a bit more horizontal space, but that's OK
here -- it doesn't shrink the message text input down to zero width,
on my iPhone, and also we're about to move these buttons into a row
below the message text input.

Author: chrisbobbe

src/compose/ComposeMenu.js

@@ -82,7 +82,7 @@ type MenuButtonProps = $ReadOnly<{|
 
 function MenuButton(props: MenuButtonProps) {
   const { onPress, IconComponent } = props;
-  const style = useMemo(() => ({ padding: 12, marginRight: -8 }), []);
+  const style = useMemo(() => ({ padding: 12 }), []);
 
   return (
     <Pressable style={style} onPress={onPress}>
@@ -252,7 +252,7 @@ export default function ComposeMenu(props: Props): Node {
     <View style={styles.container}>
       <AnimatedComponent
         stylePropertyName="width"
-        fullValue={40 * numIcons}
+        fullValue={48 * numIcons}
         useNativeDriver={false}
         visible={expanded}
       >