From 0c55fb7e895e731c82793e6ac5e7ecbc2a029d2e Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 23 Jun 2023 15:28:29 -0500
Subject: [PATCH] stream_settings: Fix scroll at max-height.

Simplebar seems unaware of the `max-height: 1000px` on
`.subscriptions-container`, and therefore does not properly provide
a scrollbar when it's needed.

This commit adds a `max-height` to the stream Simplebar container,
ensuring that otherwise hidden content that Simplebar believes to
be visible can be scrolled to.

Finally, rather than rely on magic numbers or math done in comments,
this commit establishes CSS variables for all relevant modal-element
heights, doing the math inline using CSS calc().

Fixes #26107.
---
 web/styles/subscriptions.css | 18 +++++++++++++-----
 web/styles/zulip.css         | 10 ++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index 27d05dd231..0ca5e0264e 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -300,7 +300,7 @@ h4.user_group_setting_subsection_title {
     width: 97%;
     overflow: hidden;
     max-width: 1200px;
-    max-height: 1000px;
+    max-height: var(--modal-container-max-height);
 
     .search-container .tab-switcher .ind-tab {
         width: auto;
@@ -700,10 +700,18 @@ h4.user_group_setting_subsection_title {
         -webkit-overflow-scrolling: touch;
 
         .stream-creation-simplebar-container {
-            /*
-                45px (.subscriptions-header) +  44px (.display-type) + 60px (.modal-footer)
-            */
-            height: calc(95vh - 149px);
+            height: calc(
+                var(--modal-container-height) -
+                    var(--modal-container-subscriptions-header-height) -
+                    var(--modal-container-subscriptions-display-type-height) -
+                    var(--modal-container-subscriptions-modal-footer-height)
+            );
+            max-height: calc(
+                var(--modal-container-max-height) -
+                    var(--modal-container-subscriptions-header-height) -
+                    var(--modal-container-subscriptions-display-type-height) -
+                    var(--modal-container-subscriptions-modal-footer-height)
+            );
         }
 
         .user-group-creation-body,
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index cbfec1cb2a..85f4c6a0cf 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -115,6 +115,16 @@ body {
        We expect `resize.js` to update this once UI is initialized. */
     --recent-topics-filters-height: 50px;
 
+    /* Overlay heights for streams modal */
+    --modal-container-height: 95vh;
+    --modal-container-max-height: 1000px;
+    /* .subscriptions-header */
+    --modal-container-subscriptions-header-height: 45px;
+    /* .display-type */
+    --modal-container-subscriptions-display-type-height: 44px;
+    /* .modal-footer */
+    --modal-container-subscriptions-modal-footer-height: 60px;
+
     /*
     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