From 3548c73c09b010d8d4f002a8dedc087b0b4dbb55 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Wed, 30 Sep 2026 10:10:00 +0000 Subject: [PATCH] =?UTF-8?q?On=20a=20phone=20the=20grid's=20pill=20search?= =?UTF-8?q?=20keeps=20its=20own=2015.2px=20text,=20so=20the=20placeholder?= =?UTF-8?q?=20fits=20beside=20the=20round=20=E2=98=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit With the ☰ resting in its corner the row pads its footprint on both sides, leaving the field about 230px wide at 390, where the live list's 19.5px text doesn't fit the placeholder. Above 576px the field keeps the live list's size. --- plugin-designs/people-groups-grid/people-groups-grid.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/plugin-designs/people-groups-grid/people-groups-grid.vue b/plugin-designs/people-groups-grid/people-groups-grid.vue index 9066e7498..57ceeee08 100644 --- a/plugin-designs/people-groups-grid/people-groups-grid.vue +++ b/plugin-designs/people-groups-grid/people-groups-grid.vue @@ -1420,6 +1420,13 @@ onMounted(() => { 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); } +/* A phone keeps the grid's own 15.2px text and insets inside the same pill. There the row pads the round + ☰'s footprint on both sides whenever the ☰ rests in its corner (see .pgg-search--repel), which leaves the + field about 230px wide at 390, and at the live list's 19.5px the placeholder does not fit in it. */ +@media (max-width: 576px) { + .pgg-root .pgg-search .search-box input { font-size: 0.95rem; padding-inline: 38px 12px; } + .pgg-root .pgg-search .search-box .search-icon { inset-inline-start: 12px; width: 18px; height: 18px; } +} .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;