From 157d7d72df146bd58446295cd6c36350794eeb8e Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 29 Oct 2025 15:25:40 -0500
Subject: [PATCH] Flatten the filter containers

---
 app/assets/stylesheets/filters.css   | 18 +++++-------------
 app/views/filters/_settings.html.erb |  8 +++-----
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index a5236e378..e1c3f87e2 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -1,30 +1,22 @@
 @layer components {
   .filters {
-    display: flex;
     align-items: center;
+    display: flex;
+    flex-wrap: wrap;
     gap: 1ch;
+    gap: var(--inline-space-half);
     justify-content: center;
     position: relative;
     view-transition-name: "filters";
-  }
 
-  #header:has(.filters) {
-    position: relative;
-  }
-
-  .filters {
     .btn {
       --btn-border-color: var(--color-ink-medium);
       --input-background: var(--color-canvas);
     }
   }
 
-  .filters__list {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--inline-space-half);
-    justify-content: center;
+  #header:has(.filters) {
+    position: relative;
   }
 
   .filter {
diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb
index 560856a66..ae604011c 100644
--- a/app/views/filters/_settings.html.erb
+++ b/app/views/filters/_settings.html.erb
@@ -1,14 +1,14 @@
 <%= tag.aside \
-      class: class_names("filters flex align-center gap-half justify-center center margin-block-end", { "filters--expanded": user_filtering.expanded? }),
+      class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }),
       data: {
-        controller: "toggle-class filter-settings",
+        controller: "toggle-enable toggle-class filter-settings",
         toggle_class_toggle_class: "filters--expanded",
         filter_settings_filters_set_class: "filters--has-filters-set",
         filter_settings_no_filtering_url_value: no_filtering_url,
         filter_settings_refresh_url_value: settings_refresh_path,
         filter_settings_cards_url_value: cards_path,
         turbo_permanent: true } do %>
-  <%= form_with url: filter_url, method: :get, class: "", data: {
+  <%= form_with url: filter_url, method: :get, class: "display-contents", data: {
         controller: "form",
         turbo_frame: "cards_container",
         filter_settings_target: "form",
@@ -18,14 +18,12 @@
 
     <%= yield form if block_given? %>
 
-    <div class="filters__list" data-controller="toggle-enable">
       <%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %>
         <%= yield form if block_given? %>
       <% end %>
       <%= render "filters/settings/controls", user_filtering: user_filtering, form: form %>
 
       <%= render "filters/settings/toggle", user_filtering: user_filtering %>
-    </div>
   <% end %>
   <%= render "filters/settings/manage", user_filtering: user_filtering, no_filtering_url: no_filtering_url %>
 <% end %>