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: zulip#3614

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>
     );

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"