Aug 7 - Update inspection page filter bar

app/templates/modern/inspections/list.html

@@ -38,15 +38,22 @@
 </div>
 
 {# ── Filters ──────────────────────────────────────────────────────────── #}
+{# Layout: fields fill two rows on the left; the actions sit in a block on the
+   right that spans both rows — Filter full-height, Clear above Export PDF.
+   Below the md breakpoint the action block wraps underneath, full width. #}
 <div class="jqc-filter-bar">
   <form method="get">
+    <div class="d-flex flex-wrap gap-3 align-items-stretch">
+
+      {# ── Fields ──────────────────────────────────────────────────────── #}
+      <div class="flex-grow-1" style="min-width:min(100%, 620px);">
         <div class="row g-2 align-items-end">
-      <div class="col-6 col-md-1">
+          <div class="col-6 col-md-2">
             <label class="form-label small mb-1">Inspection #</label>
             <input type="number" name="inspection_id" class="form-control form-control-sm"
                    min="1" placeholder="ID" value="{{ inspection_id_filter }}">
           </div>
-      <div class="col-6 col-md-2">
+          <div class="col-6 col-md-3">
             <label class="form-label small mb-1">Status</label>
             <select name="status" class="form-select form-select-sm">
               <option value="">All Statuses</option>
@@ -66,7 +73,7 @@
               {% endfor %}
             </select>
           </div>
-      <div class="col-12 col-md-3">
+          <div class="col-12 col-md-4">
             <label class="form-label small mb-1">Facility</label>
             <select name="facility_id" id="insp_filter_facility" class="form-select form-select-sm">
               <option value="">All Facilities</option>
@@ -75,8 +82,14 @@
               {% endfor %}
             </select>
           </div>
+        </div>
+
+        {# Second row. The score fields absorb the Inspector column's width when
+           the viewer is an inspector (they only ever see their own work, so the
+           dropdown is not rendered for them) — the row always totals 12. #}
+        <div class="row g-2 align-items-end mt-2">
           {% if inspectors %}
-      <div class="col-12 col-md-2">
+          <div class="col-12 col-md-4">
             <label class="form-label small mb-1">Inspector</label>
             <select name="inspector_id" class="form-select form-select-sm">
               <option value="">All Inspectors</option>
@@ -86,40 +99,50 @@
             </select>
           </div>
           {% endif %}
-    </div>
+          <div class="col-6 col-md-{{ 3 if inspectors else 4 }}">
-    <div class="row g-2 align-items-end mt-1">
-      <div class="col-6 col-md-2">
             <label class="form-label small mb-1">Date From</label>
             <input type="date" name="date_from" class="form-control form-control-sm"
                    value="{{ date_from_filter }}">
           </div>
-      <div class="col-6 col-md-2">
+          <div class="col-6 col-md-{{ 3 if inspectors else 4 }}">
             <label class="form-label small mb-1">Date To</label>
             <input type="date" name="date_to" class="form-control form-control-sm"
                    value="{{ date_to_filter }}">
           </div>
-      <div class="col-6 col-md-1">
+          <div class="col-6 col-md-{{ 1 if inspectors else 2 }}">
             <label class="form-label small mb-1">Min Score</label>
             <input type="number" name="score_min" class="form-control form-control-sm"
                    min="0" max="100" placeholder="0" value="{{ score_min_filter }}">
           </div>
-      <div class="col-6 col-md-1">
+          <div class="col-6 col-md-{{ 1 if inspectors else 2 }}">
             <label class="form-label small mb-1">Max Score</label>
             <input type="number" name="score_max" class="form-control form-control-sm"
                    min="0" max="100" placeholder="100" value="{{ score_max_filter }}">
           </div>
-      <div class="col-12 col-md-auto d-flex align-items-end gap-2 flex-wrap">
+        </div>
-        <button type="submit" class="btn btn-sm btn-primary px-3">
+      </div>
-          <i class="bi bi-funnel"></i> Filter
+
+      {# ── Actions — spans both field rows ─────────────────────────────── #}
+      <div class="d-flex gap-2 align-items-stretch flex-grow-1 flex-md-grow-0">
+        <button type="submit"
+                class="btn btn-primary d-flex align-items-center justify-content-center flex-grow-1 flex-md-grow-0"
+                style="min-width:112px;">
+          <span><i class="bi bi-funnel"></i> Filter</span>
         </button>
-        <a href="{{ url_for('inspections.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
+        <div class="d-flex flex-column gap-2 flex-grow-1 flex-md-grow-0">
+          <a href="{{ url_for('inspections.index') }}"
+             class="btn btn-sm btn-outline-secondary d-flex align-items-center justify-content-center flex-grow-1"
+             style="min-width:124px;">Clear</a>
           <a id="exportPdfBtn"
              href="{{ url_for('inspections.export_list_pdf', **request.args) }}"
-           class="btn btn-sm btn-outline-danger">
+             class="btn btn-sm btn-outline-danger d-flex align-items-center justify-content-center flex-grow-1 text-nowrap"
-          <i class="bi bi-file-earmark-pdf"></i> Export PDF
+             style="min-width:124px;">
+            <span><i class="bi bi-file-earmark-pdf"></i> Export PDF</span>
           </a>
         </div>
       </div>
+
+    </div>
   </form>
 </div>