Share menu opens at natural height in a page header (no scrollbar)
Some checks are pending
build-gate / build (push) Waiting to run

MapControlMenu's 'fit inside the map' height clamp is right for a map
host but wrong for ShareButton's header fallback: the fallback tags
the ~56px header band as the area (data-map-area='share-fallback'),
and the menu clamped INSIDE it -- measured on upg-100-mfe, a 291px
share menu rendered with a 69px scrolling body. A menu must never
outgrow a MAP's walls, but a header band is not a wall (nothing clips
below it), so a share-fallback area now bounds against the VIEWPORT.

Measured: header host body 291/291 no scroll, menu 342px tall below
the band; map host (doxa-simple-map) unchanged, 287/287 within the
map. Real map areas keep the original walls -- only the self-tagged
fallback takes the new branch.
This commit is contained in:
doxa-maps-88655c70 2026-09-23 23:47:28 +00:00
parent ae388d6da8
commit 61bd1cf8c5
7 changed files with 33 additions and 23 deletions

View file

@ -76,7 +76,17 @@ function place() {
const offset = onRight ? (ar.right - tr.left + gap) : (tr.right - ar.left + gap)
const width = Math.max(200, Math.min(props.width, ar.width - offset - edge))
const top = Math.max(0, tr.top - ar.top)
let maxHeight = Math.max(120, ar.height - top - edge) // fit the content inside the map
// "Fit inside the map" is the rule ONLY for a real map area. When ShareButton mounted in a
// page HEADER, its fallback self-tagged that header band as the area (data-map-area=
// "share-fallback", see ShareButton.bindAnchor) -- and this line then dutifully clamped the
// menu INSIDE a ~56px band: measured on upg-100-mfe, a 291px share menu rendered with a 69px
// scrolling body (BUG-SHARE-MENU-HAS-A-SCROLLBAR-SHOULD-BE-FULLY-EXPANDED). A menu must never
// outgrow a MAP's walls, but a header band is not a wall -- nothing clips below it -- so the
// fallback area bounds against the VIEWPORT instead and the menu opens at natural height.
const isFallbackArea = area.getAttribute && area.getAttribute('data-map-area') === 'share-fallback'
let maxHeight = isFallbackArea
? Math.max(120, (window.innerHeight || 900) - tr.top - edge) // header host: the page below is available
: Math.max(120, ar.height - top - edge) // map host: fit inside the map
if (props.matchToolbar) maxHeight = Math.max(120, Math.min(maxHeight, tr.height))
if (props.maxHeight) maxHeight = Math.min(maxHeight, props.maxHeight)
style.value = {

File diff suppressed because one or more lines are too long

View file

@ -623,7 +623,7 @@
"bundle": "my-upg-100-list",
"scriptUrl": "./my-upg-100-list/my-upg-100-list.js",
"output": "doxa-maps/my-upg-100-list/my-upg-100-list.js",
"integrity": "sha384-we1vxOSsKO6L9jEWyO9RgD7mwBuR9HsBiCkk7vYS/zAADO3T7oXkpED2XeOd8tzO",
"integrity": "sha384-KqXR+HLamYnXTwmZ0Cxxz/0OP6mS8hkwu0GPsVsZ2CydWAUtNTl7yNZkQMm0BKPE",
"elements": [
"my-upg-100-list-map"
],
@ -643,7 +643,7 @@
"scriptUrl": "./my-upg-100-list/my-upg-100-list.js",
"embed": {
"iframe": "<iframe src=\"./my-upg-100-list/poster-wall/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./my-upg-100-list/my-upg-100-list.js\" integrity=\"sha384-we1vxOSsKO6L9jEWyO9RgD7mwBuR9HsBiCkk7vYS/zAADO3T7oXkpED2XeOd8tzO\" crossorigin=\"anonymous\"></script>\n<my-upg-100-list-map profile-config='{\"profile\":\"poster-wall\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></my-upg-100-list-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./my-upg-100-list/my-upg-100-list.js\" integrity=\"sha384-KqXR+HLamYnXTwmZ0Cxxz/0OP6mS8hkwu0GPsVsZ2CydWAUtNTl7yNZkQMm0BKPE\" crossorigin=\"anonymous\"></script>\n<my-upg-100-list-map profile-config='{\"profile\":\"poster-wall\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></my-upg-100-list-map>"
}
},
{
@ -657,7 +657,7 @@
"scriptUrl": "./my-upg-100-list/my-upg-100-list.js",
"embed": {
"iframe": "<iframe src=\"./my-upg-100-list/upg-100-list/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./my-upg-100-list/my-upg-100-list.js\" integrity=\"sha384-we1vxOSsKO6L9jEWyO9RgD7mwBuR9HsBiCkk7vYS/zAADO3T7oXkpED2XeOd8tzO\" crossorigin=\"anonymous\"></script>\n<my-upg-100-list-map profile-config='{\"profile\":\"upg-100-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></my-upg-100-list-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./my-upg-100-list/my-upg-100-list.js\" integrity=\"sha384-KqXR+HLamYnXTwmZ0Cxxz/0OP6mS8hkwu0GPsVsZ2CydWAUtNTl7yNZkQMm0BKPE\" crossorigin=\"anonymous\"></script>\n<my-upg-100-list-map profile-config='{\"profile\":\"upg-100-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></my-upg-100-list-map>"
}
},
{
@ -671,7 +671,7 @@
"scriptUrl": "./my-upg-100-list/my-upg-100-list.js",
"embed": {
"iframe": "<iframe src=\"./my-upg-100-list/upg-100-mfe/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./my-upg-100-list/my-upg-100-list.js\" integrity=\"sha384-we1vxOSsKO6L9jEWyO9RgD7mwBuR9HsBiCkk7vYS/zAADO3T7oXkpED2XeOd8tzO\" crossorigin=\"anonymous\"></script>\n<my-upg-100-list-map profile-config='{\"profile\":\"upg-100-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></my-upg-100-list-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./my-upg-100-list/my-upg-100-list.js\" integrity=\"sha384-KqXR+HLamYnXTwmZ0Cxxz/0OP6mS8hkwu0GPsVsZ2CydWAUtNTl7yNZkQMm0BKPE\" crossorigin=\"anonymous\"></script>\n<my-upg-100-list-map profile-config='{\"profile\":\"upg-100-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></my-upg-100-list-map>"
}
}
]

File diff suppressed because one or more lines are too long

View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <my-upg-100-list-map> custom element. -->
<script src="../my-upg-100-list.js" integrity="sha384-we1vxOSsKO6L9jEWyO9RgD7mwBuR9HsBiCkk7vYS/zAADO3T7oXkpED2XeOd8tzO" crossorigin="anonymous"></script>
<script src="../my-upg-100-list.js" integrity="sha384-KqXR+HLamYnXTwmZ0Cxxz/0OP6mS8hkwu0GPsVsZ2CydWAUtNTl7yNZkQMm0BKPE" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <my-upg-100-list-map> custom element. -->
<script src="../my-upg-100-list.js" integrity="sha384-we1vxOSsKO6L9jEWyO9RgD7mwBuR9HsBiCkk7vYS/zAADO3T7oXkpED2XeOd8tzO" crossorigin="anonymous"></script>
<script src="../my-upg-100-list.js" integrity="sha384-KqXR+HLamYnXTwmZ0Cxxz/0OP6mS8hkwu0GPsVsZ2CydWAUtNTl7yNZkQMm0BKPE" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -40,7 +40,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <my-upg-100-list-map> custom element. -->
<script src="../my-upg-100-list.js" integrity="sha384-we1vxOSsKO6L9jEWyO9RgD7mwBuR9HsBiCkk7vYS/zAADO3T7oXkpED2XeOd8tzO" crossorigin="anonymous"></script>
<script src="../my-upg-100-list.js" integrity="sha384-KqXR+HLamYnXTwmZ0Cxxz/0OP6mS8hkwu0GPsVsZ2CydWAUtNTl7yNZkQMm0BKPE" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order: