From a27be135da92d6c40fa74f8f38e01494d20cee38 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <oscar@oscarhinton.com>
Date: Fri, 14 May 2021 21:03:45 +0200
Subject: [PATCH] Change all remaining modals to be scrollable (#976)

* Change all remaining modals to be scrollable

* Fix password-generator-history and two-factor-options not using modal-body

* Remove modal-dialog-scrollable on two-factor-setup components
---
 .../two-factor-options.component.html         | 26 +++++++-------
 .../manage/collection-add-edit.component.html |  2 +-
 .../manage/entity-events.component.html       |  2 +-
 .../manage/entity-users.component.html        |  2 +-
 .../manage/group-add-edit.component.html      |  2 +-
 .../manage/policy-edit.component.html         |  2 +-
 .../manage/user-add-edit.component.html       |  2 +-
 .../manage/user-confirm.component.html        |  2 +-
 .../manage/user-groups.component.html         |  2 +-
 .../delete-organization.component.html        |  2 +-
 src/app/send/add-edit.component.html          |  2 +-
 src/app/settings/api-key.component.html       |  2 +-
 .../deauthorize-sessions.component.html       |  2 +-
 .../settings/delete-account.component.html    |  2 +-
 .../emergency-access-add-edit.component.html  |  2 +-
 .../emergency-access-confirm.component.html   |  2 +-
 .../emergency-access-takeover.component.html  |  2 +-
 src/app/settings/purge-vault.component.html   |  2 +-
 src/app/settings/update-key.component.html    |  2 +-
 .../password-generator-history.component.html | 34 ++++++++++---------
 src/app/vault/attachments.component.html      |  2 +-
 src/app/vault/bulk-delete.component.html      |  2 +-
 src/app/vault/bulk-move.component.html        |  2 +-
 src/app/vault/bulk-restore.component.html     |  2 +-
 src/app/vault/bulk-share.component.html       |  2 +-
 src/app/vault/collections.component.html      |  2 +-
 src/app/vault/folder-add-edit.component.html  |  2 +-
 src/app/vault/share.component.html            |  2 +-
 28 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/src/app/accounts/two-factor-options.component.html b/src/app/accounts/two-factor-options.component.html
index 0cc16ae7aa..56ba2985e1 100644
--- a/src/app/accounts/two-factor-options.component.html
+++ b/src/app/accounts/two-factor-options.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
@@ -7,17 +7,19 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div class="list-group list-group-flush">
-                <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
-                    class="list-group-item list-group-item-action">
-                    <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
-                    <h3>{{p.name}}</h3>
-                    {{p.description}}
-                </a>
-                <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
-                    <h3>{{'recoveryCodeTitle' | i18n}}</h3>
-                    {{'recoveryCodeDesc' | i18n}}
-                </a>
+            <div class="modal-body">
+                <div class="list-group list-group-flush">
+                    <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
+                        class="list-group-item list-group-item-action">
+                        <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
+                        <h3>{{p.name}}</h3>
+                        {{p.description}}
+                    </a>
+                    <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
+                        <h3>{{'recoveryCodeTitle' | i18n}}</h3>
+                        {{'recoveryCodeDesc' | i18n}}
+                    </a>
+                </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/organizations/manage/collection-add-edit.component.html b/src/app/organizations/manage/collection-add-edit.component.html
index ee08acd93b..18c71da905 100644
--- a/src/app/organizations/manage/collection-add-edit.component.html
+++ b/src/app/organizations/manage/collection-add-edit.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="collectionAddEditTitle">{{title}}</h2>
diff --git a/src/app/organizations/manage/entity-events.component.html b/src/app/organizations/manage/entity-events.component.html
index b3ebac2f3f..d9d61c5f5a 100644
--- a/src/app/organizations/manage/entity-events.component.html
+++ b/src/app/organizations/manage/entity-events.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="eventLogsTitle">
diff --git a/src/app/organizations/manage/entity-users.component.html b/src/app/organizations/manage/entity-users.component.html
index 0452505aba..86b029c196 100644
--- a/src/app/organizations/manage/entity-users.component.html
+++ b/src/app/organizations/manage/entity-users.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="userAccessTitle">
diff --git a/src/app/organizations/manage/group-add-edit.component.html b/src/app/organizations/manage/group-add-edit.component.html
index 6f0a9d6650..e94b06afe7 100644
--- a/src/app/organizations/manage/group-add-edit.component.html
+++ b/src/app/organizations/manage/group-add-edit.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="groupAddEditTitle">{{title}}</h2>
diff --git a/src/app/organizations/manage/policy-edit.component.html b/src/app/organizations/manage/policy-edit.component.html
index 3fb734bdf9..5acde1b066 100644
--- a/src/app/organizations/manage/policy-edit.component.html
+++ b/src/app/organizations/manage/policy-edit.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="policiesEditTitle">{{'editPolicy' | i18n}} - {{name}}</h2>
diff --git a/src/app/organizations/manage/user-add-edit.component.html b/src/app/organizations/manage/user-add-edit.component.html
index 27572fadb8..6f4b54aa80 100644
--- a/src/app/organizations/manage/user-add-edit.component.html
+++ b/src/app/organizations/manage/user-add-edit.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="userAddEditTitle">
diff --git a/src/app/organizations/manage/user-confirm.component.html b/src/app/organizations/manage/user-confirm.component.html
index 3c12bab7b5..d27bc927db 100644
--- a/src/app/organizations/manage/user-confirm.component.html
+++ b/src/app/organizations/manage/user-confirm.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()">
             <div class="modal-header">
                 <h2 class="modal-title" id="confirmUserTitle">
diff --git a/src/app/organizations/manage/user-groups.component.html b/src/app/organizations/manage/user-groups.component.html
index 28f8371b80..f5a4d38290 100644
--- a/src/app/organizations/manage/user-groups.component.html
+++ b/src/app/organizations/manage/user-groups.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAccessTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="groupAccessTitle">
diff --git a/src/app/organizations/settings/delete-organization.component.html b/src/app/organizations/settings/delete-organization.component.html
index 73cf047a66..248db8d08a 100644
--- a/src/app/organizations/settings/delete-organization.component.html
+++ b/src/app/organizations/settings/delete-organization.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteOrganizationTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="deleteOrganizationTitle">{{'deleteOrganization' | i18n}}</h2>
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index d479bed2c7..0c051a3e12 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="sendAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate
             autocomplete="off">
             <div class="modal-header">
diff --git a/src/app/settings/api-key.component.html b/src/app/settings/api-key.component.html
index 9e5a9bc9ab..e76c7a50ea 100644
--- a/src/app/settings/api-key.component.html
+++ b/src/app/settings/api-key.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="apiKeyTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="apiKeyTitle">{{apiKeyTitle | i18n}}</h2>
diff --git a/src/app/settings/deauthorize-sessions.component.html b/src/app/settings/deauthorize-sessions.component.html
index f21e1e4177..cc3ccc737c 100644
--- a/src/app/settings/deauthorize-sessions.component.html
+++ b/src/app/settings/deauthorize-sessions.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deAuthTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="deAuthTitle">{{'deauthorizeSessions' | i18n}}</h2>
diff --git a/src/app/settings/delete-account.component.html b/src/app/settings/delete-account.component.html
index b2114a2ca5..fd17c56a8f 100644
--- a/src/app/settings/delete-account.component.html
+++ b/src/app/settings/delete-account.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="deleteAccountTitle">{{'deleteAccount' | i18n}}</h2>
diff --git a/src/app/settings/emergency-access-add-edit.component.html b/src/app/settings/emergency-access-add-edit.component.html
index 19fe1c970b..91392c28ba 100644
--- a/src/app/settings/emergency-access-add-edit.component.html
+++ b/src/app/settings/emergency-access-add-edit.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="userAddEditTitle">
diff --git a/src/app/settings/emergency-access-confirm.component.html b/src/app/settings/emergency-access-confirm.component.html
index 7693d05ac7..289c33f844 100644
--- a/src/app/settings/emergency-access-confirm.component.html
+++ b/src/app/settings/emergency-access-confirm.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="confirmUserTitle">
diff --git a/src/app/settings/emergency-access-takeover.component.html b/src/app/settings/emergency-access-takeover.component.html
index b2825d078c..466c9b6437 100644
--- a/src/app/settings/emergency-access-takeover.component.html
+++ b/src/app/settings/emergency-access-takeover.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="userAddEditTitle">
diff --git a/src/app/settings/purge-vault.component.html b/src/app/settings/purge-vault.component.html
index a9bad09461..b1fe2435ab 100644
--- a/src/app/settings/purge-vault.component.html
+++ b/src/app/settings/purge-vault.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="purgeVaultTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="purgeVaultTitle">{{'purgeVault' | i18n}}</h2>
diff --git a/src/app/settings/update-key.component.html b/src/app/settings/update-key.component.html
index 8941c9505d..cf813c8c51 100644
--- a/src/app/settings/update-key.component.html
+++ b/src/app/settings/update-key.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="updateEncKeyTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="updateEncKeyTitle">{{'updateEncryptionKey' | i18n}}</h2>
diff --git a/src/app/tools/password-generator-history.component.html b/src/app/tools/password-generator-history.component.html
index e8f77d3b50..849a9e0437 100644
--- a/src/app/tools/password-generator-history.component.html
+++ b/src/app/tools/password-generator-history.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="passHistoryTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="passHistoryTitle">{{'passwordHistory' | i18n}}</h2>
@@ -7,21 +7,23 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <ul class="list-group list-group-flush" *ngIf="history.length">
-                <li class="list-group-item d-flex" *ngFor="let h of history">
-                    <div class="password-row">
-                        <div class="text-monospace password-wrapper" [innerHTML]="h.password | colorPassword"
-                            appSelectCopy></div>
-                        <small class="text-muted">{{h.date | date:'medium'}}</small>
-                    </div>
-                    <div class="ml-auto">
-                        <button class="btn btn-link" appA11yTitle="{{'copyPassword' | i18n}}"
-                            (click)="copy(h.password)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </li>
-            </ul>
+            <div class="modal-body" *ngIf="history.length">
+                <ul class="list-group list-group-flush">
+                    <li class="list-group-item d-flex" *ngFor="let h of history">
+                        <div class="password-row">
+                            <div class="text-monospace password-wrapper" [innerHTML]="h.password | colorPassword"
+                                appSelectCopy></div>
+                            <small class="text-muted">{{h.date | date:'medium'}}</small>
+                        </div>
+                        <div class="ml-auto">
+                            <button class="btn btn-link" appA11yTitle="{{'copyPassword' | i18n}}"
+                                (click)="copy(h.password)">
+                                <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                    </li>
+                </ul>
+            </div>
             <div class="modal-body" *ngIf="!history.length">
                 {{'noPasswordsInList' | i18n}}
             </div>
diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index bff4095bf0..420534b3a7 100644
--- a/src/app/vault/attachments.component.html
+++ b/src/app/vault/attachments.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="attachmentsTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="attachmentsTitle">
diff --git a/src/app/vault/bulk-delete.component.html b/src/app/vault/bulk-delete.component.html
index 1028e42b8d..a29981162d 100644
--- a/src/app/vault/bulk-delete.component.html
+++ b/src/app/vault/bulk-delete.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteSelectedTitle">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="deleteSelectedTitle">
diff --git a/src/app/vault/bulk-move.component.html b/src/app/vault/bulk-move.component.html
index 1622be5a72..cb665b5da6 100644
--- a/src/app/vault/bulk-move.component.html
+++ b/src/app/vault/bulk-move.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="moveSelectedTitle">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="moveSelectedTitle">
diff --git a/src/app/vault/bulk-restore.component.html b/src/app/vault/bulk-restore.component.html
index b9040ef213..da6e32542b 100644
--- a/src/app/vault/bulk-restore.component.html
+++ b/src/app/vault/bulk-restore.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="restoreSelectedTitle">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="restoreSelectedTitle">
diff --git a/src/app/vault/bulk-share.component.html b/src/app/vault/bulk-share.component.html
index cc15a0ba4a..3c09c8569e 100644
--- a/src/app/vault/bulk-share.component.html
+++ b/src/app/vault/bulk-share.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="shareSelectedTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="shareSelectedTitle">
diff --git a/src/app/vault/collections.component.html b/src/app/vault/collections.component.html
index 1cbaf9f502..38316b1a79 100644
--- a/src/app/vault/collections.component.html
+++ b/src/app/vault/collections.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionsTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="collectionsTitle">
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index a4418bfe10..39ffebcf97 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/src/app/vault/folder-add-edit.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="folderAddEditTitle">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="folderAddEditTitle">{{title}}</h2>
diff --git a/src/app/vault/share.component.html b/src/app/vault/share.component.html
index 601d0a2664..16edb2e9fd 100644
--- a/src/app/vault/share.component.html
+++ b/src/app/vault/share.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="shareTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="shareTitle">