Fix page being blank on small screens due to table filters (#4525)

There seems to be an extra fixed DOM element present that activates only
on
small screens and takes over the whole screen; nothing is visible on the
page if there is a table rendered with the new table filter code.

This PR removes the extra style at the table filter top level wrapper
and also adds some gap between two filter items in the button form.
Here is the original image:

Author: theskumar

hypha/apply/funds/templates/funds/includes/table_filter_and_search.html

@@ -51,7 +51,7 @@ <h2 class="mb-2 text-xl">{{ heading }}</h2>
     </div>
 </div>
 
-<div class="fixed inset-0 w-full h-screen bg-white duration-300 delay-75 lg:relative lg:h-auto lg:bg-transparent lg:pointer-events-auto z-[9] transition-[max-height] lg:max-h-fit">
+<div>
     {% get_filtered_query request filter.form as filtered_query %}
     {% if filtered_query %}
         <div class="flex flex-wrap gap-1 mt-3">
@@ -76,7 +76,7 @@ <h2 class="mb-2 text-xl">{{ heading }}</h2>
         </div>
     {% endif %}
 
-    <form method="GET" class="flex sticky top-0 flex-wrap justify-end items-center py-2 px-3 mt-3 bg-gray-50 border-t border-gray-200 md:gap-5 md:text-sm md:font-medium z-[5] border-x">
+    <form method="GET" class="flex sticky top-0 flex-wrap gap-2 justify-end items-center py-2 px-3 mt-3 bg-gray-50 border-t border-gray-200 md:gap-5 md:text-sm md:font-medium z-[5] border-x">
         <span class="hidden items-center py-1 md:inline-flex"></span>
         {% for field_name, field in filter.form|get_filter_fields %}
             {% if filter.form %}