invite_user_modal: Always show scrollbar.

We now always show the scrollbar in invite modal body if it is scrollable.
This avoids confusion and makes it clear that some options are out of view.

Fixes #29393.

web/src/dialog_widget.ts

@@ -63,6 +63,7 @@ export type DialogWidgetConfig = {
     post_render?: () => void;
     loading_spinner?: boolean;
     update_submit_disabled_state_on_change?: boolean;
+    always_visible_scrollbar?: boolean;
 };
 
 type RequestOpts = {
@@ -130,6 +131,9 @@ export function launch(conf: DialogWidgetConfig): void {
     //   submit button when clicked.
     // * update_submit_disabled_state_on_change: If true, updates state of submit button
     //   on valid input change in modal.
+    // * always_visible_scrollbar: Whether the scrollbar is always visible if modal body
+    //   has scrollable content. Default behaviour is to hide the scrollbar when it is
+    //   not in use.
 
     const html_submit_button = conf.html_submit_button ?? $t_html({defaultMessage: "Save changes"});
     const html_exit_button = conf.html_exit_button ?? $t_html({defaultMessage: "Cancel"});
@@ -141,6 +145,7 @@ export function launch(conf: DialogWidgetConfig): void {
         html_body: conf.html_body,
         id: conf.id,
         single_footer_button: conf.single_footer_button,
+        always_visible_scrollbar: conf.always_visible_scrollbar,
     });
     const $dialog = $(html);
     $("body").append($dialog);

web/src/invite.ts

@@ -494,6 +494,7 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
         loading_spinner: true,
         on_click: invite_users,
         post_render: invite_user_modal_post_render,
+        always_visible_scrollbar: true,
     });
 }
 

web/templates/dialog_widget.hbs

@@ -10,7 +10,7 @@
                 </h1>
                 <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
             </header>
-            <main class="modal__content" data-simplebar>
+            <main class="modal__content" data-simplebar {{#if always_visible_scrollbar}}data-simplebar-auto-hide="false"{{/if}}>
                 <div class="alert" id="dialog_error"></div>
                 {{{ html_body }}}
             </main>