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: #16038.

frontend_tests/node_tests/compose_actions.js

@@ -39,6 +39,9 @@ mock_esm("../../static/js/common", {
 mock_esm("../../static/js/unread_ops", {
     notify_server_message_read: noop,
 });
+mock_esm("../../static/js/resize", {
+    reset_compose_textarea_max_height: noop,
+});
 set_global("current_msg_list", {
     can_mark_messages_read() {
         return true;

static/js/compose_actions.js

@@ -19,6 +19,7 @@ import * as notifications from "./notifications";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as reload_state from "./reload_state";
+import * as resize from "./resize";
 import * as stream_bar from "./stream_bar";
 import * as stream_data from "./stream_data";
 import * as ui_util from "./ui_util";
@@ -264,6 +265,11 @@ export function start(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();
+
     complete_starting_tasks(msg_type, opts);
 }
 

static/js/resize.js

@@ -163,8 +163,30 @@ export function watch_manual_resize(element) {
     });
 }
 
+export function reset_compose_textarea_max_height(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,
+    );
+};
+
 export function resize_bottom_whitespace(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.
+        reset_compose_textarea_max_height(h.bottom_whitespace_height);
+    }
 }
 
 export function resize_stream_filters_container(h) {