message_preview: Set preview height based on edit area.

This ensures that neither the compose box nor the edit-message area
shifts when toggling back and forth between edit and preview modes.

web/src/compose.js

@@ -58,11 +58,19 @@ export function show_preview_area() {
     $("#compose").addClass("preview_mode");
     $("#compose .preview_mode_disabled .compose_control_button").attr("tabindex", -1);
 
-    const content = $("textarea#compose-textarea").val();
+    const $compose_textarea = $("textarea#compose-textarea");
+    const content = $compose_textarea.val();
+    const edit_height = $compose_textarea.height();
+
     $("#compose .markdown_preview").hide();
     $("#compose .undo_markdown_preview").show();
     $("#compose .undo_markdown_preview").trigger("focus");
-    $("#compose .preview_message_area").show();
+
+    const $preview_message_area = $("#compose .preview_message_area");
+    // Set the preview area to the edit height to keep from
+    // having the preview jog the size of the compose box.
+    $preview_message_area.css({height: edit_height + "px"});
+    $preview_message_area.show();
 
     compose_ui.render_and_show_preview(
         $("#compose .markdown_preview_spinner"),

web/src/message_edit.js

@@ -1424,6 +1424,7 @@ export function is_message_oldest_or_newest(
 export function show_preview_area($element) {
     const $row = rows.get_closest_row($element);
     const $msg_edit_content = $row.find(".message_edit_content");
+    const edit_height = $msg_edit_content.height();
     const content = $msg_edit_content.val();
 
     // Disable unneeded compose_control_buttons as we don't
@@ -1434,7 +1435,11 @@ export function show_preview_area($element) {
     $msg_edit_content.hide();
     $row.find(".markdown_preview").hide();
     $row.find(".undo_markdown_preview").show();
-    $row.find(".preview_message_area").show();
+    const $preview_message_area = $row.find(".preview_message_area");
+    // Set the preview area to the edit height to keep from
+    // having the preview jog the size of the message-edit box.
+    $preview_message_area.css({height: edit_height + "px"});
+    $preview_message_area.show();
 
     compose_ui.render_and_show_preview(
         $row.find(".markdown_preview_spinner"),

web/styles/app_variables.css

@@ -468,6 +468,9 @@
     */
     --max-unmaximized-compose-height: 40vh;
 
+    /* Maximum height of the message-edit and preview areas. */
+    --max-message-edit-height: 24em;
+
     /*
     Line height of the message buttons in compose box. Here it's necessary
     to control this value uniformly and precisely to avoid issues with

web/styles/compose.css

@@ -1360,10 +1360,6 @@ textarea.new_message_textarea {
 
 .preview_message_area {
     padding: 5px;
-    /* the maximum height the textarea gets to. */
-    max-height: 308px;
-    /* the minimum height the textarea collapses to. */
-    min-height: 42px;
     overflow: auto;
 
     border-radius: 3px 3px 0 0;

web/styles/message_row.css

@@ -681,7 +681,7 @@
 }
 
 .message_edit_content {
-    max-height: 24em;
+    max-height: var(--max-message-edit-height);
     width: 100%;
     min-width: 206px;
     min-height: 52px;
@@ -776,6 +776,10 @@ of the base style defined for a read-only textarea in dark mode. */
         margin-left: 0;
         margin-top: 0;
     }
+
+    .preview_message_area {
+        max-height: var(--max-message-edit-height);
+    }
 }
 
 .message_edit_notice {

web/tests/compose.test.js

@@ -653,6 +653,9 @@ test_ui("on_events", ({override, override_rewire}) => {
 
     (function test_markdown_preview_compose_clicked() {
         // Tests setup
+        $("textarea#compose-textarea").set_height(50);
+        $("#compose .preview_message_area").css = noop;
+
         function setup_visibilities() {
             $("#compose .markdown_preview").show();
             $("#compose .undo_markdown_preview").hide();