Fix/modal open 3dot open and some design (#1665)

* fix: build issues

* fix: design

* fix: not reflecting the design

* fix: 3 dot menu

Author: arifulhoque7

assets/css/admin/form-builder.css

@@ -2855,6 +2855,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   margin-top: 0.5rem;
 }
 
+.wpuf-mt-20 {
+  margin-top: 5rem;
+}
+
 .wpuf-mt-3 {
   margin-top: 0.75rem;
 }

assets/css/admin/subscriptions.min.css

@@ -324,8 +324,21 @@ const openModal = (event) => {
 
   // Trigger the jQuery modal
   if (window.jQuery) {
-    window.jQuery('.wpuf-form-template-modal').show();
-    window.jQuery('#wpbody-content .wrap').hide();
+  
+    const $ = window.jQuery;
+    const $modal = $('.wpuf-form-template-modal');
+    
+    $modal.show().removeClass('wpuf-hidden');
+    
+    $modal[0].offsetHeight;
+    
+    setTimeout(function() {
+      $modal.addClass('wpuf-modal-show');
+    }, 10);
+    
+    $('body').addClass('wpuf-modal-open');
+    $('body').css('overflow', 'hidden');
+    $('#wpbody-content .wrap').hide();
   } else {
     // Fallback if jQuery is not available
     window.location.href = newFormUrl;
@@ -621,7 +634,7 @@ onMounted(() => {
         </div>
 
         <!-- Pagination -->
-        <div v-if="totalPages > 1" class="wpuf-flex wpuf-items-center wpuf-justify-center wpuf-mt-8">
+        <div v-if="totalPages > 1" class="wpuf-flex wpuf-items-center wpuf-justify-center wpuf-mt-20">
           <nav class="wpuf-flex wpuf-items-center wpuf-w-full">
             <div>
               <button

assets/css/forms-list.min.css

@@ -85,15 +85,15 @@ function wpuf_get_template_category( $template_title, $categories, $form_type =
 }
 ?>
 <div class="wpuf-form-template-modal wpuf-fixed wpuf-top-0 wpuf-left-0 wpuf-w-screen wpuf-h-screen wpuf-bg-gray-100 wpuf-hidden wpuf-z-[999999]" role="dialog" aria-modal="true" aria-labelledby="template-modal-title" aria-describedby="template-modal-description" style="background-color: #F8FAFC;">
+    <button
+        class="wpuf-absolute wpuf-right-8 wpuf-top-4 wpuf-text-gray-400 hover:wpuf-text-gray-600 focus:wpuf-outline-none wpuf-close-btn wpuf-border wpuf-border-gray-200 wpuf-rounded-full wpuf-p-2 hover:wpuf-border-gray-300 wpuf-bg-white wpuf-z-[1000000]">
+        <svg xmlns="http://www.w3.org/2000/svg" class="wpuf-h-6 wpuf-w-6" fill="none" viewBox="0 0 24 24"
+             stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+    </button>
+    
     <div class="wpuf-relative wpuf-mx-auto wpuf-p-8 wpuf-h-full wpuf-overflow-y-auto wpuf-max-w-[1400px]">
-        <button
-            class="wpuf-absolute wpuf-right-4 wpuf-top-4 wpuf-text-gray-400 hover:wpuf-text-gray-600 focus:wpuf-outline-none wpuf-close-btn wpuf-border wpuf-border-gray-200 wpuf-rounded-full wpuf-p-2 hover:wpuf-border-gray-300 wpuf-bg-white wpuf-z-[1000000]">
-            <svg xmlns="http://www.w3.org/2000/svg" class="wpuf-h-6 wpuf-w-6" fill="none" viewBox="0 0 24 24"
-                 stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-            </svg>
-        </button>
-
         <div class="wpuf-max-w-full wpuf-mx-auto wpuf-relative wpuf-z-[999998]">
             <!-- Header -->
             <div class="wpuf-mb-14 wpuf-mt-10 wpuf-ml-10">

assets/js/components/FormsList.vue

@@ -1,4 +1,4 @@
-<div id="wpuf-post-forms-list-table-view" class="wpuf-h-100vh wpuf-bg-white wpuf-ml-[-20px] wpuf-py-0 wpuf-px-[20px] wpuf-overflow-hidden">
+<div id="wpuf-post-forms-list-table-view" class="wpuf-h-100vh wpuf-bg-white wpuf-ml-[-20px] wpuf-py-0 wpuf-px-[20px]">
     <noscript>
         <strong>
             <?php esc_html_e( "We're sorry but this page doesn't work properly without JavaScript. Please enable it to continue.", 'wp-user-frontend' ); ?>