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

The list and the table painted thousands of pixels below their host box

Browse source 
Neither element had a :host rule at all, so each fell back to the custom-element
default — display:inline, no height of its own — while its root div carried
position:absolute;inset:0. Absolute positioning resolves against the nearest
POSITIONED ancestor, so on a partner page both resolved against the PARTNER's
layout rather than against this element.

rega measured it on a partner page with a 420px host box: connectivity-list
painted to y=16,799 and data-tables to y=1,698 — 16,355px and 1,254px below the
box, over whatever the partner had underneath.

The same fix as connectivity-map's (60cb4ff18), for the same reason:
  :host{display:block;position:relative;width:100%;height:100%;min-height:320px}
display:block gives the element a box; position:relative makes that box the
containing block; height:100% lets a definite-height slot decide; min-height is
the floor so an auto-height host grows to fit instead of collapsing.

NO NEW SCROLL CONTAINER WAS NEEDED. .ci and .ct already carry overflow-y:auto —
the scroller existed, it simply had no host to be bounded by. Once contained,
the list and the table scroll inside the box, which is what an embed should do
in a definite-height slot.

min-height is 320px here, not the map's 420px: regions-list.vue:408 is the house
pattern for list profiles, and a list is legible shorter than a map is.

(cherry picked from commit 08ad95fa86e64dfe043befb156e358c91319e511)
This commit is contained in:
Doxa Maps 2026-09-29 14:10:04 +00:00
parent dbee30e827
commit eec16a8fd8
2 changed files with 17 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -150,6 +150,17 @@ const band = (a) => a === 'yes' ? 'ok' : a === 'partial' ? 'mid' : a === 'no' ?
const bandLabel = (a) => t('connectivity.list.band.' + (['yes', 'partial', 'no'].includes(a) ? a : 'unknown'))
useShadowStyles(
// ★ THE LIST MUST STAY INSIDE ITS HOST BOX. This element had NO :host rule, so a custom element
// falls back to display:inline with no height of its own, and .ci below — position:absolute;inset:0
// — resolved against whatever the PARTNER page happened to have positioned. rega measured the result
// on a partner page: content painting to y=16,799, which is 16,355px BELOW a 420px host box.
// display:block gives it a box; position:relative makes that box the containing block .ci resolves
// against; height:100% lets a definite-height slot decide; min-height is the floor for an AUTO-height
// host, which grows to fit instead of collapsing to nothing. .ci already carries overflow-y:auto, so
// once it is contained the list SCROLLS inside the box rather than overflowing it — no new scroll
// container is needed, only a host for the one that is already there.
// Pattern: regions-list.vue:408, plus the position:relative that connectivity-map needed (60cb4ff18).
':host{display:block;position:relative;width:100%;height:100%;min-height:320px}' +
'.ci{position:absolute;inset:0;overflow-y:auto;padding:20px 18px 44px;background:#f6f7f9;color:#0f1419;' +
"font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}" +
'.ci.is-dark{background:#0a1410;color:#e5e7eb}' +

6
plugin-designs/cities-internet/data-tables.vue
View file

@ -88,6 +88,12 @@ watch(current, (t) => t && ensure(t.file), { immediate: true })
const table = computed(() => cache.value[current.value?.file] || null)
useShadowStyles(
// ★ THE TABLE MUST STAY INSIDE ITS HOST BOX — the same defect and the same fix as connectivity-list.
// With no :host rule the element is inline with no height, and .ct (position:absolute;inset:0)
// resolved against the partner page's positioned ancestor instead of this element. rega measured
// content painting to y=1,698, which is 1,254px BELOW a 420px host box.
// .ct already has overflow-y:auto, so containing it is enough to make the table scroll in the box.
':host{display:block;position:relative;width:100%;height:100%;min-height:320px}' +
'.ct{position:absolute;inset:0;overflow-y:auto;padding:18px;background:#f6f7f9;color:#0f1419;' +
"font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}" +
'.ct.is-dark{background:#0a1410;color:#e5e7eb}' +