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

The embedded map still painted 478px below its host box

Browse source 
73bc270bc gave :host a height and stopped the ELEMENT overflowing. It did not
stop the MAP, because it never made the host a containing block.

.gm is position:absolute;inset:0, which resolves against the nearest POSITIONED
ancestor. :host had display:block and a height but no position, so on a partner
page .gm resolved against whatever the PARTNER had positioned and the map sized
itself to that. rega measured it in the hostbox run on ca07fc3c8: the element
correct at 420px inside a 420px box, the canvas inside it still 900px, and the
"Tap a coloured dot" pill and the attribution painting 478px below the box —
538px in a 360px box — over the partner's own text, whose top sits at y=464/404.

position:relative on :host is the whole fix, and it is the house pattern:
prayer-walk-planner.vue:628 carries the identical shape with an absolute child.

Worth recording, because the first fix passed every check: a host box that is
the right size proves nothing about what is drawn inside it. Only a partner-page
shot with content BELOW the box can see this, which is why rega's hostbox run
found it and my source reading did not.
This commit is contained in:
Doxa Maps 2026-09-29 13:57:51 +00:00
parent c9caf68e44
commit 60cb4ff184
1 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
plugin-designs/cities-internet/connectivity-map.vue
View file

@ -478,7 +478,16 @@ useShadowStyles(
// attribution among it, drawn below the card and clipped. Same class as the board's, and the same // attribution among it, drawn below the card and clipped. Same class as the board's, and the same
// fix it already carries: height:100% so a height-bounded slot decides, min-height as a floor so an // fix it already carries: height:100% so a height-bounded slot decides, min-height as a floor so an
// AUTO-height host still gets a usable map instead of a zero-height one that renders nothing. // AUTO-height host still gets a usable map instead of a zero-height one that renders nothing.
':host{display:block;width:100%;height:100%;min-height:420px}' + // ★ position:relative IS LOAD-BEARING, and leaving it out made the rule above only HALF a fix.
// .gm below is position:absolute;inset:0, and absolute positioning resolves against the nearest
// POSITIONED ancestor — which :host was not. So on a partner page .gm resolved against whatever the
// PARTNER happened to have positioned, and the map sized itself to that rather than to this element.
// rega measured it in the hostbox run on ca07fc3c8: the element was CORRECT at 420px in a 420px box,
// while the canvas inside it stayed 900px and painted the pill and the attribution 478px below the
// box (538px in a 360px box), over the partner's own text. Giving the host a HEIGHT without making it
// a CONTAINING BLOCK fixes the box and not what is drawn inside it.
// prayer-walk-planner.vue:628 already carries this exact shape.
':host{display:block;position:relative;width:100%;height:100%;min-height:420px}' +
'.gm{position:absolute;inset:0;overflow:hidden}' + '.gm{position:absolute;inset:0;overflow:hidden}' +
'.gm-map{position:absolute;inset:0}' + '.gm-map{position:absolute;inset:0}' +
// LEGEND: a BOUNDED, left-anchored panel — NOT a full-width strip. // LEGEND: a BOUNDED, left-anchored panel — NOT a full-width strip.