Refactor filter section layout in question view for improved styling and structure

sbas/templates/sbas/question_view.html

@@ -7,16 +7,35 @@
 
 <div id="view-filter-options">
     <h3>Filter SBA Questions</h3>
-<form action="" method="get">
+<div class="row">
+    <div class="col-12 col-lg-3 mb-3">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <span class="h6 mb-0">Filters</span>
+                <button class="btn btn-sm btn-outline-secondary d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#filter-collapse" aria-expanded="false">Toggle</button>
+            </div>
+            <div id="filter-collapse" class="collapse d-lg-block">
+                <div class="card-body">
+                    <form action="" method="get">
+                        {{ filter.form|crispy }}
+                        <div class="mt-2">
+                            <button class="btn btn-primary btn-sm" type="submit">Apply</button>
+                            <a class="btn btn-secondary btn-sm" href="?">Reset</a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
 
-    {{ filter.form }}
+    <div class="col-12 col-lg-9">
-
+        <div class="table-responsive">
-    <input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
+            {% autoescape off %}
-</form>
+            {% load render_table from django_tables2 %}
+            {% render_table table %}
+            {% endautoescape %}
+        </div>
+    </div>
 </div>
-    {% autoescape off %}
-{% load render_table from django_tables2 %}
-{% render_table table %}
-    {% endautoescape %}
 
 {% endblock %}