From f6f208b0652c26d093e6bd70e789419773a2abd1 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 20 Oct 2025 17:16:32 +0100
Subject: [PATCH] Refactor filter section layout in question table view for
 improved responsiveness and styling

---
 templates/question_table_view.html | 37 +++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/templates/question_table_view.html b/templates/question_table_view.html
index 7833af45..a3663b6a 100644
--- a/templates/question_table_view.html
+++ b/templates/question_table_view.html
@@ -55,11 +55,11 @@
             max-height: 50vh;
             overflow-y: auto;
         }
-                .floating-filter .filter-toggle {
-                    position: fixed;
-                    right: 1rem;
-                    bottom: 1rem;
-                    z-index: 1040;
+        .floating-filter .filter-toggle {
+            position: fixed;
+            right: 1rem;
+            bottom: 1rem;
+            z-index: 1040;
         }
         /* minibar/tab styling - small visible handle so panel isn't fully hidden */
         .bottom-filter-minibar {
@@ -73,14 +73,14 @@
     </style>
 
             <!-- Minibar: small visible strip when panel is collapsed -->
-            <div id="bottom-filter-minibar" class="bottom-filter-minibar">
-                <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-controls="bottom-filter-body">Filters</button>
-            </div>
+    <div id="bottom-filter-minibar" class="bottom-filter-minibar">
+        <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-controls="bottom-filter-body">Filters</button>
+    </div>
 
     <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="mt-2">
+                        <div class="row g-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>