Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Karl Stolley 2023-06-23 15:28:29 -05:00 committed by Tim Abbott
parent 1676d0b638
commit 0c55fb7e89
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/styles/subscriptions.css
View File

@ -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,

10
web/styles/zulip.css
View File

@ -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