diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index b72f91cfd..a5236e378 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -19,6 +19,14 @@
}
}
+ .filters__list {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--inline-space-half);
+ justify-content: center;
+ }
+
.filter {
&[aria-selected] {
display: flex;
@@ -133,12 +141,19 @@
}
.quick-filter {
+ position: relative;
+
&:has([aria-checked="true"]):not(.quick-filter--with-default) {
.input--select {
--input-background: var(--color-selected);
}
}
+ /* Hide a quick filter if there's nothing in it to filter by */
+ &:not(:has(.popup__item)) {
+ display: none !important;
+ }
+
@media (max-width: 80ch) {
display: none;
}
diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb
index e17e0847d..560856a66 100644
--- a/app/views/filters/_settings.html.erb
+++ b/app/views/filters/_settings.html.erb
@@ -18,7 +18,7 @@
<%= yield form if block_given? %>
-
+
<%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %>
<%= yield form if block_given? %>
<% end %>
diff --git a/app/views/filters/settings/_tags.html.erb b/app/views/filters/settings/_tags.html.erb
index 9ce332673..6d355327f 100644
--- a/app/views/filters/settings/_tags.html.erb
+++ b/app/views/filters/settings/_tags.html.erb
@@ -1,39 +1,38 @@
<% filter = user_filtering.filter %>
-<%= tag.div class: "quick-filter position-relative",
+<%= tag.div class: "quick-filter",
data: {
controller: "dialog multi-selection-combobox",
action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
filter_show: user_filtering.show_tags?,
multi_selection_combobox_no_selection_label_value: "Tagged…" } do %>
-
+
-
- <%= hidden_field_tag "tag_ids[]", nil, data: { filter_settings_target: "field" } %>
-
+
+ <%= hidden_field_tag "tag_ids[]", nil, data: { filter_settings_target: "field" } %>
+
- <%= filter_dialog "Tagged…" do %>
-
+ <%= filter_dialog "Tagged…" do %>
+
- <% if user_filtering.tags.many? %>
- <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
- type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
- <% end %>
-
-
+ <% if user_filtering.tags.many? %>
+ <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
+ type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
<% end %>
+
+
+ <% end %>
<% end %>