doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The grid's search field is centred on a phone, clear of the round ☰ on both sides, and the unclear Exact chip is hidden

Browse source 
The ☰ clearance padded only the circle's side, which pushed the field off centre. It now pads both
sides, and the row centres the field. Exact is hidden with display:none; the search stays fuzzy and
the filter code behind the chip is unchanged. Big Picture and dashboard-plus-grid run the grid with
its search off, so neither renders differently.
This commit is contained in:
Doxa Maps 2026-09-30 08:26:09 +00:00
parent f51eb3c367
commit 3b12fec79a
1 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
plugin-designs/people-groups-grid/people-groups-grid.vue
View file

@ -1266,16 +1266,20 @@ onMounted(() => {
phone so the button drops under the input instead of squeezing it. */
.pgg-search--repel {
gap: 10px; align-items: center; flex-wrap: wrap;
justify-content: space-between;
justify-content: center;
width: 100%; max-width: 600px; margin-inline: auto;
/* ★ BESIDE THE GALLERY'S ROUND ☰. 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. */
padding-inline-start: var(--map-fab-beside, 0px); box-sizing: border-box;
/* ★ 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;
}
.pgg-search--repel > :first-child { flex: 1 1 320px; min-width: 0; }
.pgg-exact { flex: none; }
/* Exact is hidden. Readers could not tell what the chip meant, and on a phone it wrapped under the
field onto a line of its own. The search stays fuzzy, and the filter code behind the chip is
unchanged. With the field alone in the row, the row centres it instead of repelling a pair. */
.pgg-exact { display: none; }
/* A CONTROL, not a text link. It was background:none + border:none + text-decoration:underline,
which reads as a hyperlink — so the four dropdowns it gates were effectively undiscoverable
(reported). Now a bordered, filled affordance in the material-light palette with a