From a66b120185a55e76044adf03e303c7bd5f9b7388 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Wed, 30 Sep 2026 09:36:45 +0000
Subject: [PATCH] The grid's search and filters look like the live DX Life
 list: a pill search field, Show filters as an uppercase link, and 37px
 dropdowns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The values are the live /research list's own computed styles, measured at 390 and 1440. The search
field spans its row (up to 600px), since the round ☰ now rides above the map's legend sheet and no
longer rests on it. Every new rule is under .pgg-root, so Big Picture's header, which shares SearchBar
and FilterDropdown, is untouched; there the grid's search and filters are off. The filters still open
by default.
---
 .../people-groups-grid/people-groups-grid.vue | 46 ++++++++++++++++---
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/plugin-designs/people-groups-grid/people-groups-grid.vue b/plugin-designs/people-groups-grid/people-groups-grid.vue
index df3f7942e..67bef608a 100644
--- a/plugin-designs/people-groups-grid/people-groups-grid.vue
+++ b/plugin-designs/people-groups-grid/people-groups-grid.vue
@@ -1037,7 +1037,7 @@ onMounted(() => {
           :model-value="localSearchTerm"
           :placeholder="t.search || 'Search people groups…'"
           :aria-label="t.search || 'Search people groups'"
-          max-width="480px"
+          max-width="600px"
           @search="onSearch"
         />
         <button
@@ -1268,12 +1268,12 @@ onMounted(() => {
   gap: 10px; align-items: center; flex-wrap: wrap;
   justify-content: center;
   width: 100%; max-width: 600px; margin-inline: auto;
-  /* ★ CLEAR OF THE GALLERY'S ROUND ☰, AND STILL CENTRED. On a phone the gallery draws a 44px circle
-     at the bottom-left (bottom-right in ar), and at rest this row sits right where it lands, so the
-     circle covered the start of the search box. The layout publishes --map-fab-beside only while the
-     circle shows. It is unset (0) on desktop, on a standalone page, and wherever there is no circle.
-     The clearance is on BOTH sides: on the circle's side alone, it pushed the field off centre. */
-  padding-inline: var(--map-fab-beside, 0px); box-sizing: border-box;
+  /* FULL WIDTH, with no room kept for the gallery's round ☰. The ☰ used to rest on this row at the
+     bottom of a phone's first screen, so the row padded itself clear of it. The ☰ now rides above the
+     map's legend sheet and drops to the bottom only once the map has scrolled away, and by then this row
+     is near the top (measured at 390, en + ar: 0 overlap at rest). So the field spans the row, as the
+     live DX Life list's does. */
+  box-sizing: border-box;
 }
 .pgg-search--repel > :first-child { flex: 1 1 320px; min-width: 0; }
 /* Exact is hidden. Readers could not tell what the chip meant, and on a phone it wrapped under the
@@ -1395,4 +1395,36 @@ onMounted(() => {
   color: var(--ink); background: var(--card); border: 1px solid var(--brand); border-radius: 8px;
 }
 .pgg-loadmore:hover { background: var(--dx-accent-soft, rgba(146, 177, 149, .10)); }
+
+/* ★ THE SEARCH AND FILTERS LOOK LIKE THE LIVE DX LIFE LIST (doxa.life/research, the list under the
+   research map). These values are that page's own computed styles, measured at 390 and at 1440:
+     - the pill search field, 51px tall, in the page's grey, with its 20px glass 19px in;
+     - "Show filters" as an uppercase link, not a bordered button;
+     - 37px dropdowns in the same grey, full width on a phone and up to 240px beside each other above one.
+   Every selector starts at .pgg-root. The Big Picture bundle compiles this grid next to its own header,
+   and that header uses the same shared SearchBar and FilterDropdown, which must not change; in Big
+   Picture the grid's search and filters are off, so none of these rules finds an element there.
+   The fonts name the live page's families first (Poppins; Brandon Grotesque for the link). Where the
+   host page loads them, as DX Life does, the grid matches it; elsewhere the system stack after them shows. */
+.pgg-root .filters { gap: 18px; }
+.pgg-root .pgg-search .search-box .search-icon { left: auto; inset-inline-start: 19px; width: 20px; height: 20px; color: rgb(128, 128, 128); }
+.pgg-root .pgg-search .search-box input {
+  height: 51px; padding-block: 10px; padding-inline: 52px 24px;
+  border: 1px solid rgb(128, 128, 128); border-radius: 100px; color: #000;
+  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 19.5px;
+}
+.pgg-root .pgg-search .search-box input::placeholder { color: rgb(128, 128, 128); }
+.pgg-root .filters__toggle {
+  background: none; border-color: transparent; border-radius: 100px; padding: 10px 42px; line-height: 1;
+  font-family: 'Brandon Grotesque', Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 15.6px; font-weight: 400; text-transform: uppercase;
+}
+.pgg-root .filters__toggle-icon { display: none; }
+.pgg-root .filters__panel { gap: 13px; }
+.pgg-root .filters__panel .filter-dropdown { flex: 1 1 160px; min-width: 160px; max-width: 240px; }
+@media (max-width: 576px) { .pgg-root .filters__panel .filter-dropdown { flex: 1 1 100%; max-width: 90vw; } }
+.pgg-root .filters__panel .filter-dropdown__trigger {
+  min-height: 37px; padding: 5px 13px; gap: 7.5px; border: 1px solid rgb(128, 128, 128);
+  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 15.6px;
+}
 </style>