From 60cb4ff1848a7d7565dc2f7ec9ee41ded189d1e7 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Tue, 29 Sep 2026 13:57:51 +0000 Subject: [PATCH] The embedded map still painted 478px below its host box MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- plugin-designs/cities-internet/connectivity-map.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/plugin-designs/cities-internet/connectivity-map.vue b/plugin-designs/cities-internet/connectivity-map.vue index 9d5470e8f..27a63684d 100644 --- a/plugin-designs/cities-internet/connectivity-map.vue +++ b/plugin-designs/cities-internet/connectivity-map.vue @@ -478,7 +478,16 @@ useShadowStyles( // 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 // 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-map{position:absolute;inset:0}' + // LEGEND: a BOUNDED, left-anchored panel — NOT a full-width strip.