From 876148387934f21076c36fa4907f438ed8f5bdce Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Wed, 30 Sep 2026 05:37:07 +0000
Subject: [PATCH] The grid's "Hide filters" icon no longer turns upside down

The filters toggle turned every svg in the button over when the filters were open. So the filter
icon beside the label flipped as well, with its longest line at the bottom, which read as a broken
icon. That shows on a phone, where the grid opens with its filters expanded. Only the chevron turns
over now.
---
 plugin-designs/people-groups-grid/people-groups-grid.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/plugin-designs/people-groups-grid/people-groups-grid.vue b/plugin-designs/people-groups-grid/people-groups-grid.vue
index 23d9d498d..b543af13a 100644
--- a/plugin-designs/people-groups-grid/people-groups-grid.vue
+++ b/plugin-designs/people-groups-grid/people-groups-grid.vue
@@ -1060,7 +1060,7 @@ onMounted(() => {
         </svg>
         {{ filtersExpanded ? (t.hide_filters || 'Hide Filters') : (t.show_filters || 'Show Filters') }}
         <span v-if="activeFilterCount" class="filters__toggle-count">{{ activeFilterCount }}</span>
-        <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <svg class="filters__toggle-chevron" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
           <path d="M2 4l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </button>
@@ -1289,7 +1289,12 @@ onMounted(() => {
   background: var(--dx-accent, #92b195); color: #fff; border-radius: 999px;
   min-width: 18px; padding: 0 5px; font-size: 0.75rem; line-height: 18px; text-align: center;
 }
-.filters__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+/* Only the CHEVRON turns over when the filters are open. The rule used to match every svg in the
+   button, so the filter icon beside the label flipped upside down too (its longest line at the
+   bottom), which read as a broken icon. Measured on a phone, where the grid opens with its filters
+   expanded. */
+.filters__toggle-chevron { flex: none; }
+.filters__toggle[aria-expanded="true"] .filters__toggle-chevron { transform: rotate(180deg); }
 .filters__panel { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; }
 .filter-toggle {
   padding: 6px 12px; cursor: pointer; font-size: 0.875rem; color: inherit; background: var(--card);