From 21ebb4f26479cb4e276cfffe72c56afa7bac98b3 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Mon, 28 Sep 2026 16:44:22 +0000 Subject: [PATCH] Stop the ring legend pushing the centered-set chart off the page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The legend was stacked below the chart in a centred column. On its own it is taller than the pane — a 360px card with a nine-cell grid and four footer lines — so the figure was pushed out of view entirely and the panel overflowed its host: the legend covered the row beneath it and the caption drew over the page tabs. The chart was not visible at all at 1440x900. It is now a row: figure left, legend right, which is also the side placement the legend was asked for. Every flex child takes min-height and min-width 0, because a flex item's default minimum is its content size — without that an item never shrinks below its natural height and the container overflows however little room it has. That default is what turned a tall card into an unbounded one. Under 900px it returns to a column and scrolls rather than clipping. Both charts now clear the centre tab strip, which is absolutely positioned near the top and was covering the top of the bounded set's dots and all of the centered set's caption. The bounded set also takes overflow:hidden, so a tall caption can never do to it what the legend did to its neighbour. Nothing about the counts changes. The page reads 2,082 placed where a slug-only join predicts 2,074: the difference is the name-and-country fallback recovering eight of the sixteen groups the neighbour table carries no slug for, and both readings still sum to the full 2,107. --- .../src/components/GiBoundedSet.vue | 6 +++- .../src/components/GiCenteredSet.vue | 25 ++++++++++++++-- public/dx-maps/doxa-maps-spa/manifest.json | 4 +-- .../gospel-internet/board/board/index.html | 2 +- .../dx-maps/gospel-internet/board/index.html | 2 +- .../board/india-china/index.html | 2 +- .../board/language-tree/index.html | 2 +- .../board/platforms/index.html | 2 +- .../board/project-700/index.html | 2 +- .../gospel-internet/board/zero/index.html | 2 +- .../gospel-internet/gospel-internet.js | 30 +++++++++---------- public/dx-maps/manifest.json | 4 +-- 12 files changed, 53 insertions(+), 30 deletions(-) diff --git a/plugin-designs/gospel-internet/src/components/GiBoundedSet.vue b/plugin-designs/gospel-internet/src/components/GiBoundedSet.vue index 66ab24caf..5c622642c 100644 --- a/plugin-designs/gospel-internet/src/components/GiBoundedSet.vue +++ b/plugin-designs/gospel-internet/src/components/GiBoundedSet.vue @@ -68,7 +68,11 @@ const tally = computed(() => boundedSetTally(layout.value)) const fmt = (n) => formatCount(Number(n) || 0) useShadowStyles( - '.gbs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f3f3f1}' + + // padding-block-start clears the centre tab strip (absolutely positioned at top:10px), which + // was overlapping the top of the dot cloud by about 20px. overflow:hidden so a tall caption + // can never push the figure out of its pane the way the legend did on the centered set. + '.gbs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;' + + 'justify-content:center;padding:46px 10px 10px;box-sizing:border-box;overflow:hidden;background:#f3f3f1}' + '.gbs svg{max-width:100%;max-height:100%}' + '.gbs-ring{fill:none;stroke:#3b463d;stroke-width:1.5}' + '.gbs-in{fill:#92b195}.gbs-out{fill:#6d766e;opacity:.65}' + diff --git a/plugin-designs/gospel-internet/src/components/GiCenteredSet.vue b/plugin-designs/gospel-internet/src/components/GiCenteredSet.vue index c66a298c6..c48c14589 100644 --- a/plugin-designs/gospel-internet/src/components/GiCenteredSet.vue +++ b/plugin-designs/gospel-internet/src/components/GiCenteredSet.vue @@ -77,7 +77,22 @@ const arrows = computed(() => layout.value.placed const fmt = (n) => formatCount(Number(n) || 0) useShadowStyles( - '.gcs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f3f3f1}' + + // ROW, NOT COLUMN, and overflow hidden. Stacked in a centred column the legend — a 360px card + // with a 3x3 grid of 44px cells and four footer lines — is taller than the pane on its own, so + // the chart was pushed out of view entirely and the whole panel overflowed its host: rega saw + // the legend covering the row below and the caption drawn over the page tabs. + // Every child gets min-height/min-width 0, because a flex item's default minimum is its CONTENT + // size — without it an item never shrinks below its natural height and the container overflows + // however little room it has. + // padding-block-start clears the centre tab strip, which is absolutely positioned at top:10px + // and was covering the top of both charts. + '.gcs{position:absolute;inset:0;display:flex;flex-direction:row;align-items:stretch;gap:10px;' + + 'padding:46px 10px 10px;box-sizing:border-box;overflow:hidden;background:#f3f3f1}' + + '.gcs-fig{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;' + + 'align-items:center;justify-content:center;overflow:hidden}' + + '.gcs-aside{flex:0 0 auto;min-height:0;overflow:auto;display:flex;align-items:flex-start}' + + '@media (max-width:900px){.gcs{flex-direction:column;overflow:auto}' + + '.gcs-aside{overflow:visible;align-self:stretch}}' + '.gcs svg{max-width:100%;max-height:100%}' + '.gcs-ring{fill:none;stroke:#d1d4cd;stroke-width:1}' + '.gcs-arrow{stroke:#92b195;stroke-width:.6;opacity:.5}' + @@ -96,6 +111,7 @@ useShadowStyles( {{ failed }}