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

MapInfo: the one-time nudge is desktop-only, at a measured threshold

Browse source 
The "What can this map do?" pointer is anchored beside the ⓘ and extends ~213px
INWARD, across whatever the tab puts in its top strip. Worst overlap per width,
measured on Deep Research on the shared browser, on 99c22caf7:

     390   Regions "Region Dashboards" 1416px^2   UPG-100 1428px^2
     768   Cities legend 6560   Gospel legend 6560 + input 6240   Regions 4200
     900   Cities legend 2432   Gospel legend 2496 + input 2176   Regions 3696
    1024   Cities CLEAN         Gospel CLEAN                      Regions 2100
    1200   CLEAN                CLEAN                             CLEAN
    1440   CLEAN                CLEAN                             CLEAN

★ IT IS NOT A PHONE PROBLEM, which is how it was first reported and how I first
fixed it. It persists to 1024 and only clears near 1200, so the max-width:600px
version I wrote first would have left 768, 900 and 1024 broken on four tabs.
Two things found that: gospel counted PANELS (.gm-legend/.gm-sheet) as well as
controls -- a control-only probe misses a legend entirely -- and upg100 measured
the same shape on their own tab (768 over "Prayer Resources" and "Map", 1024 over
"Map", clear at 1200+), in en and ar.

★ ARABIC IS MEASURED, not argued. My first attempt used ?lang=ar, which does not
switch the locale -- the page stayed dir=ltr and I reported that run as invalid
rather than as an ar pass. Via DX Life's /ar/ route (dir=rtl confirmed) the
pointer is hidden and clean at 390, 768 and 1024, and at 1440 it mirrors to the
start side (x=104) and is clean there too.

★ TWO OTHER SHAPES WERE MEASURED FIRST AND BOTH WERE WORSE. Stacking it below the
button traded one collision for five: Gospel's "Resources found" chip (2010px^2)
plus the zoom +/- of Prayer Progress, Big Picture and Simple Research. Hiding
only its text shrank it to 30px but still left 675px^2 on "Region Dashboards" and
900px^2 on Gospel's search input.

⚠ NOT A PLACEMENT CHANGE, and an earlier draft of this got it wrong. It also
pinned the button's inline side at narrow widths; studio's pos.narrow values have
since landed and the buttons now sit at x=8, 12, 294 and 346 across the seven
tabs at 390. A pinned inset-inline-* here wins by specificity and would have
silently flattened every one of them. The button is placement's business; this
rule is only about the hint. 0 added lines declare --map-info-side; 0 touch
.mi-btn.

Its own block rather than the existing 600px one, which also full-screens the
dialog and has nothing to do with this.

VERIFIED AFTER THE CHANGE, en and ar: pointer hidden and 0 overlaps at 390, 768
and 1024 on Cities, Gospel, Regions and UPG-100; present and clean at 1200 and
1440.

NOT FIXED HERE: at 1440 Big Picture's pointer lies over the Religion filter by
1050px^2. Stacking it below the button there does not clear it -- it relocates it
to "Adopted" 561 + "1%" 425. The only single rule that clears that too is hiding
the pointer at every width, which deletes the affordance where it does fit. So
BP-1440 wants a per-tab placement value or a known-minor ruling; it is
pointer-events:none, so the filter still opens.
This commit is contained in:
Doxa Maps 2026-09-29 22:45:49 +00:00
parent 838f6c14b6
commit 3b0fb958e1
1 changed files with 35 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
library/components/info/MapInfo.vue
View file

@ -252,6 +252,41 @@ useShadowStyles(`
.mi-foot input{ width:20px; height:20px; }
/* A phone gets the whole screen: a floating card with margins leaves too little room for a page. */
/* ★ THE ONE-TIME NUDGE IS DESKTOP-ONLY, AND THE THRESHOLD IS MEASURED, NOT CHOSEN. The pointer
is anchored beside the button and extends ~213px INWARD, straight across whatever the tab puts
in its top strip. Measured on Deep Research, on the shared browser, worst overlap per width:
390 Regions "Region Dashboards" 1416px^2 UPG-100 1428px^2
768 Cities legend 6560 Gospel legend 6560 + input 6240 Regions selector 4200
900 Cities legend 2432 Gospel legend 2496 + input 2176 Regions selector 3696
1024 Cities CLEAN Gospel CLEAN Regions selector 2100
1200 CLEAN CLEAN CLEAN
1280 CLEAN CLEAN CLEAN
UPG-100 measures the same shape independently: 768 over "Prayer Resources" AND "Map", 1024 over
"Map", clear at 1200/1280/1440 -- in en AND ar.
So it is not a phone problem, which is how it was first reported and first fixed: it persists
to 1024 and only clears near 1200. A max-width:600px rule would have left 768, 900 and 1024
broken on four tabs -- found because gospel counted PANELS (.gm-legend/.gm-sheet) as well as
controls, which a control-only probe misses entirely.
ARABIC IS MEASURED, not argued: via DX Life's /ar/ route (dir=rtl confirmed), the pointer is
hidden and clean at 390, 768 and 1024, and at 1440 it mirrors to the start side (x=104) and is
clean there too.
THE RULE IS ITS OWN BLOCK, deliberately: the 600px block below also full-screens the dialog,
and this has nothing to do with the phone sheet. The .98 covers fractional viewport widths
under browser zoom.
Hiding it below the measured clear width is the only rule that holds everywhere: the button it
points at is untouched, so nothing becomes unreachable, and a hint that covers a map's own
legend, search box or view switcher is worse than no hint.
Two other shapes were measured and both were worse: stacking it below the button traded one
collision for five (Gospel's "Resources found" 2010px^2, plus the zoom +/- of three tabs), and
hiding only its text still left 675px^2 on "Region Dashboards" and 900px^2 on Gospel's input.
⚠ NOT A PLACEMENT CHANGE. The per-tab pos.narrow values in the shell's tabInfo are measured per
tab (the buttons sit at x=8, 12, 294 and 346 across the seven tabs at 390); an inset-inline-*
pinned here would win by specificity and silently flatten all of them. The button is
placement's business; this rule is only about the hint. */
@media (max-width:1199.98px){
.mi-pointer{ display:none; }
}
@media (max-width:600px){
.mi-scrim{ padding:0; align-items:stretch; }
.mi-dialog{ width:100%; max-height:none; height:100%; border-radius:0; }