ComposeBox : Fixed composebox overlapping latest messages

While writing long messages,the textarea would cover-up the latest messages hence blocking its visibility .
Fixed this by adding a max-height property to textarea , hence
avoiding overlapping with the latest messages in the current stream.

Fixes zulip#16038

static/js/click_handlers.js

@@ -645,10 +645,12 @@ exports.initialize = function () {
     $(".compose_stream_button").on("click", () => {
         popovers.hide_mobile_message_buttons_popover();
         compose_actions.start("stream", {trigger: "new topic button"});
+        compose_ui.autosize_textarea();
     });
     $(".compose_private_button").on("click", () => {
         popovers.hide_mobile_message_buttons_popover();
         compose_actions.start("private");
+        compose_ui.autosize_textarea();
     });
 
     $("body").on("click", ".compose_mobile_stream_button", () => {

static/js/compose_ui.js

@@ -6,6 +6,17 @@ const people = require("./people");
 
 exports.autosize_textarea = function () {
     autosize.update($("#compose-textarea"));
+    $("#compose-textarea").css(
+        "max-height",
+        parseInt($("#bottom_whitespace").outerHeight(), 10) -
+            (parseInt($("#below-compose-content").outerHeight(), 10) +
+                parseInt($("#right_part").outerHeight(), 10) +
+                parseInt($("#compose-textarea").css("padding-top"), 10) +
+                parseInt($("#compose-textarea").css("padding-bottom"), 10) +
+                parseInt($("#compose-textarea").css("margin-top"), 10) +
+                parseInt($(".message_comp.compose-content").css("padding-top"), 10) +
+                parseInt($(".message_comp.compose-content").css("padding-bottom"), 10)),
+    );
 };
 
 exports.smart_insert = function (textarea, syntax) {

static/js/resize.js

@@ -157,6 +157,7 @@ exports.watch_manual_resize = function (element) {
 
 exports.resize_bottom_whitespace = function (h) {
     $("#bottom_whitespace").height(h.bottom_whitespace_height);
+    compose_ui.autosize_textarea();
 };
 
 exports.resize_stream_filters_container = function (h) {

templates/zerver/app/compose.html

@@ -64,7 +64,7 @@
                     <div class="compose_table">
                         <div id="stream-message">
                             <div class="stream-selection-header-colorblock message_header_stream left_part"></div>
-                            <div class="right_part">
+                            <div class="right_part" id = 'right_part'>
                                 <span id="compose-lock-icon">
                                     <i class="fa fa-lock" title="{{ _('This is a private stream') }}" aria-hidden="true"></i>
                                 </span>