feat: long message ctx menu (#3451)

## 🎯 Goal

This PR implements the new design for very long messages in the context
menu.

Short summary:

- Scrollability is removed
- Layout is changed to always visible top/bottom items
- Layout calculations have been adjusted to fit the frame here

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap

@@ -787,19 +787,15 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
     }
   >
     <View
+      pointerEvents="box-none"
       style={
-        [
-          {
-            "height": 0,
-          },
-          {
-            "transform": [
-              {
-                "translateY": 0,
-              },
-            ],
-          },
-        ]
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
     >
       <View
@@ -1708,19 +1704,15 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
     }
   >
     <View
+      pointerEvents="box-none"
       style={
-        [
-          {
-            "height": 0,
-          },
-          {
-            "transform": [
-              {
-                "translateY": 0,
-              },
-            ],
-          },
-        ]
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
     >
       <View
@@ -2629,19 +2621,15 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
     }
   >
     <View
+      pointerEvents="box-none"
       style={
-        [
-          {
-            "height": 0,
-          },
-          {
-            "transform": [
-              {
-                "translateY": 0,
-              },
-            ],
-          },
-        ]
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
     >
       <View

package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap

@@ -785,19 +785,15 @@ exports[`SendButton should render a SendButton 1`] = `
     }
   >
     <View
+      pointerEvents="box-none"
       style={
-        [
-          {
-            "height": 0,
-          },
-          {
-            "transform": [
-              {
-                "translateY": 0,
-              },
-            ],
-          },
-        ]
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
     >
       <View
@@ -1704,19 +1700,15 @@ exports[`SendButton should render a disabled SendButton 1`] = `
     }
   >
     <View
+      pointerEvents="box-none"
       style={
-        [
-          {
-            "height": 0,
-          },
-          {
-            "transform": [
-              {
-                "translateY": 0,
-              },
-            ],
-          },
-        ]
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
     >
       <View

package/src/components/MessageMenu/MessageActionListItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
@@ -63,12 +63,12 @@ export const MessageActionListItem = (props: MessageActionListItemProps) => {
   const {
     theme: {
       semantics,
-      colors: { black },
       messageMenu: {
         actionListItem: { container, icon: iconTheme, title: titleTheme },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const onActionPress = useStableCallback(() => {
     closeOverlay();
@@ -88,23 +88,36 @@ export const MessageActionListItem = (props: MessageActionListItemProps) => {
         style={[styles.container, container]}
       >
         <View style={iconTheme}>{icon}</View>
-        <Text style={[styles.titleStyle, { color: black }, titleStyle, titleTheme]}>{title}</Text>
+        <Text style={[styles.titleStyle, titleStyle, titleTheme]}>{title}</Text>
       </View>
     </Pressable>
   );
 };
 
-const styles = StyleSheet.create({
-  buttonContainer: {
-    borderRadius: primitives.radiusLg,
-  },
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    padding: primitives.spacingXs,
-  },
-  titleStyle: {
-    paddingLeft: primitives.spacingXs,
-  },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        buttonContainer: {
+          borderRadius: primitives.radiusLg,
+        },
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+          padding: primitives.spacingXs,
+        },
+        titleStyle: {
+          paddingLeft: primitives.spacingXs,
+          fontWeight: primitives.typographyFontWeightMedium,
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+          color: semantics.textPrimary,
+        },
+      }),
+    [semantics.textPrimary],
+  );
+};