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 }}