From 9b6113608ba6f44f8a40bd7b7cd2ee6725b30f02 Mon Sep 17 00:00:00 2001
From: jainkuniya <jainkuniya@gmail.com>
Date: Sat, 7 Dec 2019 12:02:25 +0530
Subject: [PATCH] composeBox: Set maxHeight of composeBox to 60%.

Now max height is set to composeBox, so when msg input expands it takes
all the space available in the parent and pushes topic input outside.

The workaround of this is to set position of topic input absolute and
adjust position of msg input accordingly with the help of marginTop.

Fixes: #3614
---
 src/chat/Chat.js          |  7 ++++++-
 src/compose/ComposeBox.js | 13 +++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/chat/Chat.js b/src/chat/Chat.js
index a29e5a2fa6f..d1c886ecaaf 100644
--- a/src/chat/Chat.js
+++ b/src/chat/Chat.js
@@ -31,6 +31,9 @@ const componentStyles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column-reverse',
   },
+  composeBox: {
+    maxHeight: '60%',
+  },
 });
 
 class Chat extends PureComponent<Props> {
@@ -45,7 +48,9 @@ class Chat extends PureComponent<Props> {
             <NoMessages narrow={narrow} />
             <UnreadNotice narrow={narrow} />
           </View>
-          {canSend && <ComposeBox narrow={narrow} />}
+          <View style={componentStyles.composeBox}>
+            {canSend && <ComposeBox narrow={narrow} />}
+          </View>
         </View>
       </KeyboardAvoider>
     );
diff --git a/src/compose/ComposeBox.js b/src/compose/ComposeBox.js
index 23136407e83..353cdc8d8b8 100644
--- a/src/compose/ComposeBox.js
+++ b/src/compose/ComposeBox.js
@@ -301,7 +301,9 @@ class ComposeBox extends PureComponent<Props, State> {
     topicInput: {
       borderWidth: 0,
       borderRadius: 5,
-      marginBottom: 8,
+      position: 'absolute',
+      top: 8,
+      width: '100%',
       ...this.inputMarginPadding,
       ...this.context.styles.backgroundColor,
     },
@@ -339,6 +341,13 @@ class ComposeBox extends PureComponent<Props, State> {
       backgroundColor: 'hsla(0, 0%, 50%, 0.1)',
     };
 
+    const showTopicInput = this.getCanSelectTopic();
+
+    // topic input have absolute position, make room for it
+    if (showTopicInput) {
+      this.styles.composeTextInput = { ...this.styles.composeTextInput, marginTop: 38 };
+    }
+
     return (
       <View>
         <View style={[this.styles.autocompleteWrapper, { marginBottom: height }]}>
@@ -362,7 +371,7 @@ class ComposeBox extends PureComponent<Props, State> {
             onExpandContract={this.handleComposeMenuToggle}
           />
           <View style={this.styles.composeText}>
-            {this.getCanSelectTopic() && (
+            {showTopicInput && (
               <Input
                 style={this.styles.topicInput}
                 underlineColorAndroid="transparent"