recent_conversation: Make all topics visible with compose open.

Fixes #25751

web/src/recent_topics_ui.js

@@ -35,6 +35,7 @@ import {
     is_visible,
     set_visible,
 } from "./recent_topics_util";
+import * as resize from "./resize";
 import * as scroll_util from "./scroll_util";
 import * as search from "./search";
 import * as stream_data from "./stream_data";
@@ -901,8 +902,8 @@ export function show() {
     narrow.handle_middle_pane_transition();
     pm_list.handle_narrow_deactivated();
     search.clear_search_form();
-
     complete_rerender();
+    resize.update_recent_topics_filters_height();
 }
 
 function filter_buttons() {

web/src/resize.js

@@ -143,6 +143,11 @@ export function resize_sidebars() {
     return h;
 }
 
+export function update_recent_topics_filters_height() {
+    const recent_topics_filters_height = $("#recent_topics_filter_buttons").safeOuterHeight(true);
+    $("html").css("--recent-topics-filters-height", `${recent_topics_filters_height}px`);
+}
+
 export function resize_page_components() {
     navbar_alerts.resize_app();
     const h = resize_sidebars();
@@ -168,6 +173,7 @@ export function handler() {
     }
     resize_page_components();
     compose_ui.autosize_textarea($("#compose-textarea"));
+    update_recent_topics_filters_height();
 
     // Re-compute and display/remove [More] links to messages
     condense.condense_and_collapse($(".message_table .message_row"));

web/styles/recent_topics.css

@@ -73,16 +73,25 @@
 
         .table_fix_head {
             padding: 0 !important;
-            /* 100px = space occupied by `recent_topics_filter_buttons`( ~49px)
+            max-height: calc(
-                     + give user some extra space at the bottom so that last
+                100vh - var(--recent-topics-filters-height) -
-                       topic row is clearly visible. */
+                    var(--navbar-fixed-height)
-            max-height: calc(100vh - 100px);
+            );
         }
 
         .table_fix_head table {
             /* To keep border properties to the thead th. */
             border-collapse: separate;
-            margin-bottom: 100px;
+            /*
+            Add margin bottom equal to `#bottom-whitespace`. This helps us keep
+            #compose visible at its max-height without overlapping with any visible
+            topics.
+
+            Alternative is to adjust the max-height of `table_fix_head` based on compose height which is an
+            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;
         }
 
         #recent_topics_filter_buttons {

web/styles/zulip.css

@@ -114,6 +114,10 @@ body {
     */
     --browser-overlay-scrollbar-width: 10px;
 
+    /* This is a rough estimate for height occupied by recent topics filters.
+       We expect `resize.js` to update this once UI is initialized. */
+    --recent-topics-filters-height: 50px;
+
     /* Colors used across the app */
     --color-background-private-message-header: hsl(46deg 35% 93%);
     --color-background-private-message-content: hsl(45deg 20% 96%);

web/tests/recent_topics.test.js

@@ -170,6 +170,9 @@ mock_esm("../src/unread", {
     },
     topic_has_any_unread_mentions: () => false,
 });
+mock_esm("../src/resize", {
+    update_recent_topics_filters_height: noop,
+});
 
 const {all_messages_data} = zrequire("all_messages_data");
 const people = zrequire("people");