Refactor filter section layout in question table view for improved responsiveness and styling

templates/question_table_view.html

@@ -80,7 +80,7 @@
     <button class="btn btn-primary filter-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="false" aria-controls="bottom-filter-body">Filters</button>
 
     <div class="floating-filter shadow-lg">
-        <div id="bottom-filter-body" class="collapse show">
+        <div id="bottom-filter-body" class="collapse">
             <div class="container-fluid">
                 <div class="d-flex justify-content-between align-items-start">
                     <div class="fw-bold">Filters</div>
@@ -92,8 +92,23 @@
                 <!-- filter body collapsible so minibar stays visible -->
                 <div class="filter-body mt-2">
                     <form action="" method="get">
-                        {{ filter.form|crispy }}
+                        <div class="row g-2">
-                        <div class="mt-2">
+                            {% for field in filter.form.visible_fields %}
+                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+                                    <div class="form-group">
+                                        {{ field.label_tag }}
+                                        {{ field }}
+                                        {% if field.errors %}
+                                            <div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>
+                                        {% endif %}
+                                        {% if field.help_text %}
+                                            <small class="form-text text-muted">{{ field.help_text }}</small>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            {% endfor %}
+                        </div>
+                        <div class="mt-2 d-flex gap-2">
                             <button class="btn btn-primary btn-sm" type="submit">Apply</button>
                             <a class="btn btn-secondary btn-sm" href="?">Reset</a>
                         </div>