compose-box: Fix compose-box from covering last messages of stream.

While writing a long message in compose-box, the last few messages of the current
stream gets covered by the compose-box and it gets pretty annoying sometimes trying
to figure out a way to read the last message of the stream while writing. Right now,
the only way to get past this is to resize `compose-textarea` by using the resize tool
at the bottom-right corner of the `compose-textarea`. But, that small resize tool is
not always readily visible to the user.

The proposed solution in this commit is to reset the `max-height` property of
`compose-textarea` everytime `bottom_whitespace_height` is resized such that the total
height of `compose-container` is always equal to the height of `bottom_whitespace_height`.
Doing this, the compose-box never covers the last message of the current stream.

The only problem with this is that if the compose-box is closed at the time of bottom-whitespace
resize, we cannot find the `compose_non_textarea_height` and so, we cannot reset the
max-height of `compose-textarea`. To solve this, max-height of `compose-textarea` is also
reset everytime a new compose-box is opened according to then `bottom_whitespace_height`.

Tested on my Ubuntu Development Environment on Chrome and Firefox browsers.

Fixes: zulip#16038.

frontend_tests/node_tests/compose_actions.js

@@ -26,6 +26,8 @@ set_global("compose_pm_pill", {});
 
 set_global("hash_util", {});
 
+set_global("resize", {});
+
 const people = zrequire("people");
 zrequire("compose_ui");
 zrequire("compose");
@@ -125,6 +127,7 @@ run_test("start", () => {
     compose_actions.complete_starting_tasks = noop;
     compose_actions.blur_compose_inputs = noop;
     compose_actions.clear_textarea = noop;
+    resize.reset_compose_textarea_max_height = noop;
 
     // Start stream message
     narrow_state.set_compose_defaults = function () {

static/js/compose_actions.js

@@ -245,6 +245,11 @@ exports.start = function (msg_type, opts) {
     // Show either stream/topic fields or "You and" field.
     show_box(msg_type, opts);
 
+    // Reset the `max-height` property of `compose-textarea` so that the
+    // compose-box do not cover the last messages of the current stream
+    // while writing a long message.
+    resize.reset_compose_textarea_max_height();
+
     exports.complete_starting_tasks(msg_type, opts);
 };
 

static/js/resize.js

@@ -155,8 +155,30 @@ exports.watch_manual_resize = function (element) {
     });
 };
 
+exports.reset_compose_textarea_max_height = function (bottom_whitespace_height) {
+    if (bottom_whitespace_height === undefined) {
+        const h = narrow_window ? left_userlist_get_new_heights() : get_new_heights();
+        bottom_whitespace_height = h.bottom_whitespace_height;
+    }
+
+    const compose_container_height = Number.parseInt($("#compose-container").outerHeight(), 10);
+    const compose_textarea_height = Number.parseInt($("#compose-textarea").outerHeight(), 10);
+    const compose_non_textarea_height = compose_container_height - compose_textarea_height;
+
+    $("#compose-textarea").css(
+        "max-height",
+        bottom_whitespace_height - compose_non_textarea_height,
+    );
+};
+
 exports.resize_bottom_whitespace = function (h) {
     $("#bottom_whitespace").height(h.bottom_whitespace_height);
+
+    if ($(".message_comp").is(":visible")) {
+        // If the compose-box is open, reset the `max-height` property of `compose-textarea`
+        // so that the compose-box never covers the last message of the current stream.
+        exports.reset_compose_textarea_max_height(h.bottom_whitespace_height);
+    }
 };
 
 exports.resize_stream_filters_container = function (h) {