css: Use a variable to track bottom_whitespace height.

Since we want the same space in recent topics to display the
compose box without overlapping with any other topics, it makes
sense to use a common variable.

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.
     //

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 {

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 {