Merge pull request dimagi#917 from dimagi/sr/modalscroll

allow scrolling on modal when it doesn't fit on screen

Author: sravfeyn

commcare_connect/program/forms.py

@@ -66,7 +66,7 @@ def __init__(self, *args, **kwargs):
                     **{"@click": "showProgramAddModal = showProgramEditModal = false"},
                 ),
                 Submit("submit", "Submit", css_class="button button-md primary-dark"),
-                css_class="float-end",
+                css_class="flex gap-3 justify-end mt-4",
             ),
         )
 

commcare_connect/templates/components/organization_home_page/add_org_member_modal.html

@@ -4,10 +4,10 @@
 <div x-show="showAddMemberModal"
      x-cloak
      x-transition.opacity
-     class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+     class="modal-backdrop"
      @keydown.escape.window="showAddMemberModal = false">
   <div @click.outside="showAddMemberModal = false"
-       class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+       class="modal">
 
     <div class="flex justify-between items-center pb-2 mb-4">
       <h2 class="text-lg font-semibold text-brand-deep-purple">

commcare_connect/templates/components/organization_home_page/remove_org_member_confirm_modal.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 
 <div x-show="showConfirmRemoveMembershipModal" x-cloak x-transition.opacity
-    class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+    class="modal-backdrop"
     @keydown.escape.window="showConfirmRemoveMembershipModal = false">
-    <div @click.outside="showConfirmRemoveMembershipModal = false" class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+    <div @click.outside="showConfirmRemoveMembershipModal = false" class="modal">
 
         <div class="flex justify-between items-center pb-2 mb-4">
             <h2 class="text-lg font-medium text-brand-deep-purple">

commcare_connect/templates/components/worker_page/delete_invites_confirm_modal.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 
 <div x-show="{{ modal_name }}" x-cloak x-transition.opacity
-    class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+    class="modal-backdrop"
     @keydown.escape.window="{{ modal_name }} = false">
-    <div @click.outside="{{ modal_name }} = false" class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+    <div @click.outside="{{ modal_name }} = false" class="modal">
 
         <div class="flex justify-between items-center pb-2 mb-4">
             <h2 class="text-lg font-medium text-brand-deep-purple">

commcare_connect/templates/components/worker_page/export_modal.html

@@ -3,10 +3,10 @@
 <div x-show="{{ modal_name }}"
      x-cloak
      x-transition.opacity
-     class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+     class="modal-backdrop"
      @keydown.escape.window="{{ modal_name }} = false">
   <div @click.outside="{{ modal_name }} = false"
-       class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+       class="modal">
 
     <div class="flex justify-between items-center pb-2 mb-4">
       <h2 class="text-lg font-medium text-brand-deep-purple">

commcare_connect/templates/components/worker_page/import_modal.html

@@ -3,10 +3,10 @@
 <div x-show="{{ modal_name }}"
      x-cloak
      x-transition.opacity
-     class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+     class="modal-backdrop"
      @keydown.escape.window="{{ modal_name }} = false">
   <div @click.outside="{{ modal_name }} = false"
-       class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+       class="modal">
 
     <div class="flex justify-between items-center pb-2 mb-4">
       <h2 class="text-lg font-medium text-brand-deep-purple">

tailwind/tailwind.css

@@ -674,11 +674,11 @@
 
 @layer {
   .modal {
-    @apply relative z-50 w-full max-w-lg rounded-xl bg-white p-6 shadow-xl;
+    @apply relative z-50 mx-auto my-4 w-full max-w-lg rounded-xl bg-white p-6 shadow-xl;
   }
 
   .modal-backdrop {
-    @apply fixed inset-0 z-40 flex items-center justify-center bg-black/40;
+    @apply fixed inset-0 z-40 overflow-y-auto bg-black/40 p-4;
   }
 
   .modal .dialog-box {