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

The gospel data table escaped its host box when embedded alone

Browse source 
Same defect as cities-internet's list and table: no :host rule at all, so the
element falls back to display:inline with no height while .gt is
position:absolute;inset:0 — which then resolves against whatever the partner
page has positioned.

TWO MOUNTS, ONE RULE, and they do not collide:
- STANDALONE (data-tables.meta.json) this is its own custom element, so :host
  applies and .gt is finally contained.
- COMPOSED, gospel-dashboard renders <DataTables/> as an inline Vue component
  with no shadow host of its own, so :host matches nothing there. Its
  '.gd-tables .gt{position:static;…}' override (gospel-dashboard.vue:81) keeps
  working, which is what lets the stacked section take its natural height and the
  page scroll. That override records a MEASURED failure — docScrollHeight 900
  against clientHeight 900, a wheel gesture moving 0px — and must not return.

min-height, not height alone: with no height, .gt's inset:0 would give the table
0px in an auto-height box, so it would stop escaping by becoming invisible. A
floor gives an auto host something to grow from; a definite-height slot still
decides through height:100%.

NOT the ProfileLoader 100dvh floor (ProfileLoader.vue:410), which is the separate
upstream cause of the connectivity-map overflow and is studio's card. .gt is not
that wrapper, so this fix stands on its own.
This commit is contained in:
Doxa Maps 2026-09-29 14:17:32 +00:00
parent af2d4cc5f8
commit cf134edc0d
1 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
plugin-designs/gospel-resources/data-tables.vue
View file

@ -350,6 +350,21 @@ const gap = computed(() => {
const fmt = (n) => (Number(n) || 0).toLocaleString()
useShadowStyles(
// ★ STANDALONE THIS NEEDS A HOST; COMPOSED IT MUST NOT BE CLAMPED. Two facts make one rule safe:
// 1. STANDALONE (data-tables.meta.json) this mounts as its own custom element, so :host applies and
// .gt — position:absolute;inset:0 — resolves against it. Without a :host rule the element is
// inline with no height and .gt escapes to whatever the PARTNER page has positioned, the same
// defect measured in cities-internet (16,355px below a 420px box) and connectivity-map.
// 2. COMPOSED, gospel-dashboard renders <DataTables/> as an INLINE Vue component, not a custom
// element. It has no shadow host of its own there, so :host matches NOTHING and cannot reach it;
// gospel-dashboard.vue:81 keeps its '.gd-tables .gt{position:static;…}' override, which is what
// lets the stacked section take its natural height and the PAGE scroll. That override recorded a
// measured failure (docScrollHeight 900 = clientHeight 900, a wheel gesture moving 0px) and must
// keep working.
// min-height, NOT height: with no height at all, .gt's absolute inset:0 gives the table 0px in an
// AUTO-height box — it would stop escaping and become invisible instead, which is not a fix. A floor
// gives an auto host something to grow from; a definite-height slot still decides via height:100%.
':host{display:block;position:relative;width:100%;height:100%;min-height:320px}' +
'.gt{position:absolute;inset:0;overflow-y:auto;padding:18px;background:#f6f7f9;color:#0f1419;' +
"font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}" +
'.gt.is-dark{background:#0a1410;color:#e5e7eb}' +