compose: Change the max-height for compose textarea.

This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038

static/styles/compose.css

@@ -300,7 +300,12 @@ textarea.new_message_textarea {
     width: calc(100% - 12px);
     padding: 5px;
     height: 1.5em;
-    max-height: 22em;
+
+    /* 50vh will ensure at most half of the viewport is taken by the
+    compose box at max and the 50px is for the top header that we have.
+    Thus, always have an ample amount of space to scroll
+    Issue #16038 */
+    max-height: calc(50vh - 50px);
     margin-bottom: 0;
     resize: vertical !important;
     margin-top: 5px;