diff --git a/web/src/resize.js b/web/src/resize.js
index 62c718c833..c6b568505b 100644
--- a/web/src/resize.js
+++ b/web/src/resize.js
@@ -120,7 +120,7 @@ export function reset_compose_message_max_height(bottom_whitespace_height) {
 
 export function resize_bottom_whitespace() {
     const bottom_whitespace_height = get_bottom_whitespace_height();
-    $("#bottom_whitespace").height(bottom_whitespace_height);
+    $("html").css("--max-unexpanded-compose-height", `${bottom_whitespace_height}px`);
     // The height of the compose box is tied to that of
     // bottom_whitespace, so update it if necessary.
     //
diff --git a/web/styles/recent_topics.css b/web/styles/recent_topics.css
index 7c45f23662..6c70f012c6 100644
--- a/web/styles/recent_topics.css
+++ b/web/styles/recent_topics.css
@@ -91,7 +91,7 @@
             expensive repaint. The downside of not doing so is that the scrollbar is not visible to user when
             user is at the bottom of scroll container when the compose box is open.
             */
-            margin-bottom: 40vh;
+            margin-bottom: var(--max-unexpanded-compose-height);
         }
 
         #recent_topics_filter_buttons {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index c47be13a81..0e390b70bf 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -118,6 +118,14 @@ body {
        We expect `resize.js` to update this once UI is initialized. */
     --recent-topics-filters-height: 50px;
 
+    /*
+    Maximum height of the compose box when it is not in expanded state. This
+    is equal to the height of `#bottom_whitespace`. We expect resize.js to
+    replace it with its pixel calculation since even if `vh` has great support,
+    it can change depending on browser / OS on mobile devices.
+    */
+    --max-unexpanded-compose-height: 40vh;
+
     /* Colors used across the app */
     --color-background-private-message-header: hsl(46deg 35% 93%);
     --color-background-private-message-content: hsl(45deg 20% 96%);
@@ -2346,7 +2354,7 @@ nav {
 
 #bottom_whitespace {
     display: block;
-    height: 300px;
+    height: var(--max-unexpanded-compose-height);
 }
 
 .operator_value {