diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index b5a2588fc4..789dab698b 100644
--- a/zephyr/static/js/ui.js
+++ b/zephyr/static/js/ui.js
@@ -243,7 +243,11 @@ function resizehandler(e) {
     $("#main_div").css('min-height', viewport.height() - $("#top_navbar").height());
 
     /* total viewport - height of navbar - height of upper sidebar - padding*/
-    $(".bottom_sidebar").height(viewport.height() - $("#top_navbar").height() - $(".upper_sidebar").height() - 40);
+    var bottom_sidebar_height = viewport.height() - $("#top_navbar").height() - $(".upper_sidebar").height() - 40;
+    $(".bottom_sidebar").height(bottom_sidebar_height);
+
+    $("#stream_filters").css('max-height', bottom_sidebar_height * 0.35);
+    $("#user_presences").css('max-height', bottom_sidebar_height * 0.35);
 
     // This function might run onReady (if we're in a narrow window),
     // but before we've loaded in the messages; in that case, don't
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index f6eb8de7f5..38c9caa260 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -78,9 +78,20 @@ a:hover code {
 
 .bottom_sidebar {
     margin-top: 1em;
+}
+
+#stream_filters {
     overflow-y: hidden;
 }
-.bottom_sidebar:hover {
+#stream_filters:hover {
+    overflow-y: auto;
+}
+
+#user_presences {
+    margin-top: 1em;
+    overflow-y: hidden;
+}
+#user_presences:hover {
     overflow-y: auto;
 }