fix: composer styling - [CU-869bfu16g] (#223)

Author: tonynagyy

src/components/ui/Avatar.tsx

@@ -120,7 +120,7 @@ const Avatar = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     gap: 8,
     justifyContent: 'space-between',
   },

src/components/ui/HighlightableTextInput.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 
 import { TextInput as RNTextInput, StyleProp, TextInputProps, TextStyle, View } from 'react-native';
 
@@ -36,25 +36,34 @@ const HighlightableTextInput: React.FC<HighlightableTextInputProps> = ({
   const highlightColor = currentColors.primary;
   const textInputRef = useRef<RNTextInput>(null);
 
-  const highlightStyle = { fontWeight: 'bold' as const, color: highlightColor };
+  const highlightStyle = useMemo(
+    () => ({ fontWeight: 'bold' as const, color: highlightColor }),
+    [highlightColor]
+  );
 
-  const triggersConfig = {
-    mention: {
-      trigger: '@',
-      textStyle: highlightStyle,
-    },
-  };
+  const triggersConfig = useMemo(
+    () => ({
+      mention: {
+        trigger: '@',
+        textStyle: highlightStyle,
+      },
+    }),
+    [highlightStyle]
+  );
 
-  const patternsConfig = {
-    mention: {
-      pattern: /(@\w+)/,
-      textStyle: highlightStyle,
-    },
-    hashtag: {
-      pattern: /(#\w+)/,
-      textStyle: highlightStyle,
-    },
-  };
+  const patternsConfig = useMemo(
+    () => ({
+      mention: {
+        pattern: /(@\w+)/,
+        textStyle: highlightStyle,
+      },
+      hashtag: {
+        pattern: /(#\w+)/,
+        textStyle: highlightStyle,
+      },
+    }),
+    [highlightStyle]
+  );
 
   const { textInputProps, triggers } = useMentions({
     value,
@@ -72,6 +81,7 @@ const HighlightableTextInput: React.FC<HighlightableTextInputProps> = ({
         placeholderTextColor={placeholderTextColor}
         style={style}
         multiline={multiline}
+        scrollEnabled={false}
         textAlignVertical={textAlignVertical}
         testID={testID}
         autoCorrect={false}

src/components/ui/ReplyInput.tsx

@@ -155,7 +155,7 @@ function getStyles(theme: 'dark' | 'light', isFocused: boolean) {
       backgroundColor: colors[theme].background,
       paddingHorizontal: 0,
       paddingTop: 8,
-      paddingBottom: Platform.OS === 'ios' ? (isFocused ? 12 : 0) : 0,
+      paddingBottom: Platform.OS === 'ios' ? 0 : 16,
     },
     replyingToContainer: {
       paddingHorizontal: 16,