From 95aa9a4f83e76b1242bfcb7e34aec8b955dc4a78 Mon Sep 17 00:00:00 2001
From: Lauryn Menard <lauryn@zulip.com>
Date: Mon, 24 Oct 2022 20:35:19 +0200
Subject: [PATCH] compose-box: Remove reset max-height calculation for preview
 click.

Removes call to reset_compose_message_max_height when clicking on
the markdown preview button, which due to the `#compose` div element
momentarily shrinking to be empty, caused the calculation of the
max-height to grow larger on each click.

Also refactors reset_compose_message_max_height to use the height
from `getBoundingClientRect`, which defaults to zero when empty.

And fixes a small discrepancy in how max-height is applied to
a div element vs a textarea element, so that the visible height
doesn't change between the preview and write modes in the compose
box.

Fixes #23277.
---
 frontend_tests/node_tests/compose.js |  6 ------
 static/js/compose.js                 |  1 -
 static/js/resize.js                  | 23 +++++++++++++++--------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js
index c0a6fa625b..9c19babada 100644
--- a/frontend_tests/node_tests/compose.js
+++ b/frontend_tests/node_tests/compose.js
@@ -758,11 +758,6 @@ test_ui("on_events", ({override, override_rewire}) => {
     })();
 
     (function test_markdown_preview_compose_clicked() {
-        let reset_compose_message_max_height_called = false;
-        override(resize, "reset_compose_message_max_height", () => {
-            reset_compose_message_max_height_called = true;
-        });
-
         // Tests setup
         function setup_visibilities() {
             $("#compose-textarea").show();
@@ -847,7 +842,6 @@ test_ui("on_events", ({override, override_rewire}) => {
 
         assert.equal($("#compose .preview_content").html(), "translated HTML: Nothing to preview");
         assert_visibilities();
-        assert.ok(reset_compose_message_max_height_called);
 
         let make_indicator_called = false;
         $("#compose-textarea").val("```foobarfoobar```");
diff --git a/static/js/compose.js b/static/js/compose.js
index 61b19477fe..55e156f677 100644
--- a/static/js/compose.js
+++ b/static/js/compose.js
@@ -696,7 +696,6 @@ export function initialize() {
             $("#compose .preview_content"),
             content,
         );
-        resize.reset_compose_message_max_height();
     });
 
     $("#compose").on("click", ".undo_markdown_preview", (e) => {
diff --git a/static/js/resize.js b/static/js/resize.js
index 44ad5fb2b5..aaaa7823b5 100644
--- a/static/js/resize.js
+++ b/static/js/resize.js
@@ -172,17 +172,24 @@ export function reset_compose_message_max_height(bottom_whitespace_height) {
         bottom_whitespace_height = h.bottom_whitespace_height;
     }
 
-    const $visible_textarea = $("#compose-textarea, #preview_message_area");
-    const compose_height = Number.parseInt($("#compose").outerHeight(), 10);
-    const compose_textarea_height = Number.parseInt($visible_textarea.outerHeight(), 10);
+    const compose_height = $("#compose").get(0).getBoundingClientRect().height;
+    const compose_textarea_height = Math.max(
+        $("#compose-textarea").get(0).getBoundingClientRect().height,
+        $("#preview_message_area").get(0).getBoundingClientRect().height,
+    );
     const compose_non_textarea_height = compose_height - compose_textarea_height;
 
-    // The `preview_message_area` can have a slightly different height
-    // than `compose-textarea` based on operating system. We just
-    // ensure that the last message is not overlapped by compose box.
-    $visible_textarea.css(
+    // We ensure that the last message is not overlapped by compose box.
+    $("#compose-textarea").css(
         "max-height",
-        // The 10 here leaves space for the selected message border.
+        // Because <textarea> max-height includes padding, we subtract
+        // 10 for the padding and 10 for the selected message border.
+        bottom_whitespace_height - compose_non_textarea_height - 20,
+    );
+    $("#preview_message_area").css(
+        "max-height",
+        // Because <div> max-height doesn't include padding, we only
+        // subtract 10 for the selected message border.
         bottom_whitespace_height - compose_non_textarea_height - 10,
     );
 }