From 5aa2e5016da4e31fa9f337a27e0d8b0632d61a11 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 3 Oct 2025 18:02:10 -0500
Subject: [PATCH] Tighten filter input

---
 app/assets/stylesheets/filters.css          | 21 ++++++++++++++++++---
 app/views/filters/settings/_terms.html.erb  |  2 +-
 app/views/filters/settings/_toggle.html.erb |  2 +-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index 7eeedc3a5..b911649da 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -103,11 +103,26 @@
     }
   }
 
-  .filter__terms {
+  .filter__terms:is(.input) {
     --input-background: var(--color-canvas);
+    --input-border-radius: 5em;
+    --input-padding: 0.5em 2.3em 0.5em 1.3em;
 
-    .filters:not(.filters--expanded) & {
-      min-inline-size: 40ch;
+    inline-size: 22ch;
+    min-inline-size: 22ch;
+
+    .filters:not(.filters--expanded, .filters--has-filters-set) & {
+      margin-inline-end: calc((var(--btn-size) + var(--inline-space-half) + 0.25em) * -1);
+    }
+  }
+
+  .filter-toggle {
+    .filters:not(.filters--expanded, .filters--has-filters-set) & {
+      --btn-background: transparent;
+      --btn-border-size: 0;
+
+      transform: translateX(calc(var(--inline-space-half) * -1));
+      position: relative;
     }
   }
 
diff --git a/app/views/filters/settings/_terms.html.erb b/app/views/filters/settings/_terms.html.erb
index 06e586df9..0d2f48b4e 100644
--- a/app/views/filters/settings/_terms.html.erb
+++ b/app/views/filters/settings/_terms.html.erb
@@ -1,4 +1,4 @@
-<%= form.text_field "terms[]", placeholder: "Filter these cards…", class: "filter__terms input txt-x-small",
+<%= form.search_field "terms[]", placeholder: "Filter these cards…", class: "filter__terms input txt-x-small",
       autofocus: false, autocomplete: :off, autocorrect: "off", data: {
             "1p-ignore": "true",
             filter_settings_target: "field",
diff --git a/app/views/filters/settings/_toggle.html.erb b/app/views/filters/settings/_toggle.html.erb
index a731373fa..1f6459e0a 100644
--- a/app/views/filters/settings/_toggle.html.erb
+++ b/app/views/filters/settings/_toggle.html.erb
@@ -5,7 +5,7 @@
     <%= icon_tag "filter" %>
   </button>
 <% else %>
-  <button type="button" class="btn txt-x-small" aria-label="Expand filter options" data-action="toggle-class#toggle toggle-enable#toggle">
+  <button type="button" class="btn txt-x-small filter-toggle" aria-label="Expand filter options" data-action="toggle-class#toggle toggle-enable#toggle">
     <%= icon_tag "filter" %>
   </button>
 <% end %>