Tighten filter input

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;
     }
   }
 

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",

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 %>