diff --git a/web/src/compose.js b/web/src/compose.js
index f033199670..5d00b26580 100644
--- a/web/src/compose.js
+++ b/web/src/compose.js
@@ -451,12 +451,10 @@ export function initialize() {
 
     resize.watch_manual_resize("#compose-textarea");
 
-    // Update position of scroll to bottom button based on
-    // height of the compose box.
-    const update_scroll_to_bottom_position = new ResizeObserver(() => {
-        $("#scroll-to-bottom-button-container").css("bottom", $("#compose").outerHeight());
-    });
-    update_scroll_to_bottom_position.observe(document.querySelector("#compose"));
+    // Updates compose max-height and scroll to bottom button position when
+    // there is a change in compose height like when a compose banner is displayed.
+    const update_compose_max_height = new ResizeObserver(resize.reset_compose_message_max_height);
+    update_compose_max_height.observe(document.querySelector("#compose"));
 
     upload.feature_check($("#compose .compose_upload_file"));
 
diff --git a/web/src/resize.js b/web/src/resize.js
index c7132b857d..62c718c833 100644
--- a/web/src/resize.js
+++ b/web/src/resize.js
@@ -91,7 +91,7 @@ export function reset_compose_message_max_height(bottom_whitespace_height) {
     // the last message of the current stream.
 
     // Compute bottom_whitespace_height if not provided by caller.
-    if (bottom_whitespace_height === undefined) {
+    if (typeof bottom_whitespace_height !== "number") {
         bottom_whitespace_height = get_bottom_whitespace_height();
     }
 
@@ -115,6 +115,7 @@ export function reset_compose_message_max_height(bottom_whitespace_height) {
         // subtract 10 for the selected message border.
         bottom_whitespace_height - compose_non_textarea_height - 10,
     );
+    $("#scroll-to-bottom-button-container").css("bottom", compose_height);
 }
 
 export function resize_bottom_whitespace() {