From 86ddeb442a928429021ae91b884c92a3356e6839 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Tue, 28 Apr 2026 19:34:16 +0700
Subject: [PATCH] Refine basis-item filters to inline responsive layout

---
 app/admin_web.py | 56 ++++++++++++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/app/admin_web.py b/app/admin_web.py
index 1bf235a..ea30494 100644
--- a/app/admin_web.py
+++ b/app/admin_web.py
@@ -725,29 +725,39 @@ def _basis_item_workspace_body(
       <h3 style="margin:0 0 8px;">Filter Variants</h3>
       <p class="muted" style="margin:0 0 12px;">Filter child variants shown in the review table below.</p>
       <form method="get" action="/admin/basis-items/{basis_item.id}" autocomplete="off">
-        <label for="status">Status</label>
-        <select id="status" name="status">
-          <option value="" {"selected" if status_filter == "" else ""}>All</option>
-          <option value="draft" {"selected" if status_filter == "draft" else ""}>draft</option>
-          <option value="approved" {"selected" if status_filter == "approved" else ""}>approved</option>
-          <option value="active" {"selected" if status_filter == "active" else ""}>active</option>
-          <option value="rejected" {"selected" if status_filter == "rejected" else ""}>rejected</option>
-          <option value="archived" {"selected" if status_filter == "archived" else ""}>archived</option>
-          <option value="stale" {"selected" if status_filter == "stale" else ""}>stale</option>
-        </select>
-        <label for="level">Level</label>
-        <select id="level" name="level">
-          <option value="" {"selected" if level_filter == "" else ""}>All</option>
-          <option value="mudah" {"selected" if level_filter == "mudah" else ""}>mudah</option>
-          <option value="sulit" {"selected" if level_filter == "sulit" else ""}>sulit</option>
-        </select>
-        <label for="run_id">Generation Run ID</label>
-        <input id="run_id" name="run_id" type="number" min="1" value="{escape(run_id_filter)}">
-        <label for="min_frequency">Min Frequency</label>
-        <input id="min_frequency" name="min_frequency" type="number" min="0" step="0.1" value="{escape(min_frequency_filter)}">
-        <div class="actions">
-          <button type="submit">Apply Filters</button>
-          <a href="/admin/basis-items/{basis_item.id}" style="display:inline-block;padding:12px 14px;border-radius:10px;background:#e2e8f0;color:#0f172a;text-decoration:none;font-size:15px;font-weight:600;">Reset</a>
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end;">
+          <div>
+            <label for="status" style="margin:0 0 6px;">Status</label>
+            <select id="status" name="status">
+              <option value="" {"selected" if status_filter == "" else ""}>All</option>
+              <option value="draft" {"selected" if status_filter == "draft" else ""}>draft</option>
+              <option value="approved" {"selected" if status_filter == "approved" else ""}>approved</option>
+              <option value="active" {"selected" if status_filter == "active" else ""}>active</option>
+              <option value="rejected" {"selected" if status_filter == "rejected" else ""}>rejected</option>
+              <option value="archived" {"selected" if status_filter == "archived" else ""}>archived</option>
+              <option value="stale" {"selected" if status_filter == "stale" else ""}>stale</option>
+            </select>
+          </div>
+          <div>
+            <label for="level" style="margin:0 0 6px;">Level</label>
+            <select id="level" name="level">
+              <option value="" {"selected" if level_filter == "" else ""}>All</option>
+              <option value="mudah" {"selected" if level_filter == "mudah" else ""}>mudah</option>
+              <option value="sulit" {"selected" if level_filter == "sulit" else ""}>sulit</option>
+            </select>
+          </div>
+          <div>
+            <label for="run_id" style="margin:0 0 6px;">Run ID</label>
+            <input id="run_id" name="run_id" type="number" min="1" value="{escape(run_id_filter)}">
+          </div>
+          <div>
+            <label for="min_frequency" style="margin:0 0 6px;">Min Frequency</label>
+            <input id="min_frequency" name="min_frequency" type="number" min="0" step="0.1" value="{escape(min_frequency_filter)}">
+          </div>
+          <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
+            <button type="submit">Apply</button>
+            <a href="/admin/basis-items/{basis_item.id}" style="display:inline-block;padding:12px 14px;border-radius:10px;background:#e2e8f0;color:#0f172a;text-decoration:none;font-size:15px;font-weight:600;">Reset</a>
+          </div>
         </div>
       </form>
     </section>