From eec16a8fd889afcefbf1311da0abd44daf9bee39 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Tue, 29 Sep 2026 14:10:04 +0000 Subject: [PATCH] The list and the table painted thousands of pixels below their host box MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- plugin-designs/cities-internet/connectivity-list.vue | 11 +++++++++++ plugin-designs/cities-internet/data-tables.vue | 6 ++++++ 2 files changed, 17 insertions(+) diff --git a/plugin-designs/cities-internet/connectivity-list.vue b/plugin-designs/cities-internet/connectivity-list.vue index 4720b7ba6..72baeb8bd 100644 --- a/plugin-designs/cities-internet/connectivity-list.vue +++ b/plugin-designs/cities-internet/connectivity-list.vue @@ -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}' + diff --git a/plugin-designs/cities-internet/data-tables.vue b/plugin-designs/cities-internet/data-tables.vue index 7a9c8f207..bb2606369 100644 --- a/plugin-designs/cities-internet/data-tables.vue +++ b/plugin-designs/cities-internet/data-tables.vue @@ -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}' +