left_sidebar: Fix some PMs not being displayed when PMs are zoomed in.

We added sticky headers above the PM list but forgot to subtract
it from the max-height of the scrollable container.

frontend_tests/node_tests/recent_topics.js

@@ -107,6 +107,10 @@ const narrow = mock_esm("../../static/js/narrow", {
     handle_middle_pane_transition: noop,
     has_shown_message_list_view: true,
 });
+mock_esm("../../static/js/pm_list", {
+    update_private_messages: noop,
+    handle_narrow_deactivated: noop,
+});
 mock_esm("../../static/js/popovers", {
     any_active: () => false,
 });

static/js/pm_list.js

@@ -3,6 +3,7 @@ import _ from "lodash";
 
 import * as pm_list_data from "./pm_list_data";
 import * as pm_list_dom from "./pm_list_dom";
+import * as resize from "./resize";
 import * as ui from "./ui";
 import * as ui_util from "./ui_util";
 import * as vdom from "./vdom";
@@ -92,6 +93,8 @@ export function update_private_messages() {
         const new_dom = _build_private_messages_list();
         set_dom_to(new_dom);
     }
+    // Make sure to update the left sidebar heights after updating PMs.
+    setTimeout(resize.resize_stream_filters_container, 0);
 }
 
 export function expand() {

static/js/resize.js

@@ -55,7 +55,8 @@ function get_new_heights() {
         Number.parseInt($("#left-sidebar").css("marginTop"), 10) -
         Number.parseInt($(".narrows_panel").css("marginTop"), 10) -
         Number.parseInt($(".narrows_panel").css("marginBottom"), 10) -
-        $("#global_filters").safeOuterHeight(true);
+        $("#global_filters").safeOuterHeight(true) -
+        $("#private_messages_sticky_header").safeOuterHeight(true);
 
     // Don't let us crush the stream sidebar completely out of view
     res.stream_filters_max_height = Math.max(80, res.stream_filters_max_height);
@@ -100,7 +101,8 @@ function left_userlist_get_new_heights() {
         Number.parseInt($(".narrows_panel").css("marginBottom"), 10) -
         $("#global_filters").safeOuterHeight(true) -
         $("#userlist-header").safeOuterHeight(true) -
-        $("#user_search_section").safeOuterHeight(true);
+        $("#user_search_section").safeOuterHeight(true) -
+        $("#private_messages_sticky_header").safeOuterHeight(true);
 
     const blocks = [
         {

static/styles/left_sidebar.css

@@ -10,6 +10,7 @@ $topic_indent: calc($far_left_gutter_size + $left_col_size + 4px);
 $topic_resolve_width: 13px;
 /* Space between section in the left sidebar. */
 $sections_vertical_gutter: 8px;
+$bottom_scrolling_buffer: 25px;
 
 #left-sidebar {
     #user-list {
@@ -320,7 +321,7 @@ li.show-more-topics {
 #subscribe-to-more-streams {
     text-decoration: none;
     margin: 5px auto 5.5px 10px;
-    margin-bottom: 25px;
+    margin-bottom: $bottom_scrolling_buffer;
 
     i {
         min-width: 19px;
@@ -705,6 +706,10 @@ li.topic-list-item {
         display: none;
     }
 
+    &.private_messages_container ul.pm-list {
+        margin-bottom: $bottom_scrolling_buffer;
+    }
+
     #more_private_messages_sidebar_title {
         display: inline;
     }

static/templates/left_sidebar.hbs

@@ -57,7 +57,7 @@
         </ul>
     </div>
 
-    <div class="private_messages_container zoom-out hidden-for-spectators">
+    <div id="private_messages_sticky_header" class="private_messages_container zoom-out hidden-for-spectators">
         <div id="private_messages_section">
             <div id="private_messages_section_header" class="zoom-out zoom-in-sticky">
                 <span id="pm_tooltip_container">