From 16ff7e719b31c9c2c2d53630b8844a0684917a2e Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Mon, 28 Sep 2026 18:53:03 +0000 Subject: [PATCH] Give the centered figure its own positioning context and a height floor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The map inside is absolutely positioned to fill its figure, but the figure was not a positioned ancestor, so it resolved against the panel instead and covered the legend beside it. The bounded set's figure already carried position:relative; this one did not — the difference two files drift into when the same rule is written twice rather than shared. In the narrow column a flex child sized by its content can resolve to zero height, which is what a chart measured at 0x0 is. The figure now has a floor, and stretches rather than centring itself into nothing. The legend takes a flex basis instead of growing to its content. Reported squeezed to 145x145 at 1440: a card that is only told a maximum will still take what it asks for, and the figure had nothing but min-width:0 with which to argue. --- .../src/components/GiCenteredSet.vue | 12 +++-- 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 | 46 +++++++++---------- public/dx-maps/manifest.json | 4 +- 11 files changed, 43 insertions(+), 37 deletions(-) diff --git a/plugin-designs/gospel-internet/src/components/GiCenteredSet.vue b/plugin-designs/gospel-internet/src/components/GiCenteredSet.vue index 9b77ec73b..8b2fb618b 100644 --- a/plugin-designs/gospel-internet/src/components/GiCenteredSet.vue +++ b/plugin-designs/gospel-internet/src/components/GiCenteredSet.vue @@ -93,9 +93,15 @@ useShadowStyles( // 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}' + + // position:relative, because the map inside is position:absolute;inset:0 and would otherwise + // resolve against the PANEL — covering the legend beside it. The bounded set's figure already + // had this; the centered one did not, which is the kind of difference two files drift into + // when the same rule is written twice. + // min-height in the narrow column: a flex child with auto content can resolve to zero height, + // which is what a 0x0 chart is. rega measured exactly that at 390px. + '.gcs-fig{position:relative;flex:1 1 auto;align-self:stretch;min-width:0;min-height:240px;' + + 'display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}' + + '.gcs-aside{flex:0 1 340px;min-width:0;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%}' + diff --git a/public/dx-maps/doxa-maps-spa/manifest.json b/public/dx-maps/doxa-maps-spa/manifest.json index 90c45d56e..2e9003386 100644 --- a/public/dx-maps/doxa-maps-spa/manifest.json +++ b/public/dx-maps/doxa-maps-spa/manifest.json @@ -615,7 +615,7 @@ "bundle": "gospel-internet", "scriptUrl": "./gospel-internet/gospel-internet.js", "output": "dx-maps/gospel-internet/gospel-internet.js", - "integrity": "sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p", + "integrity": "sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td", "elements": [ "gospel-internet-board" ], @@ -635,7 +635,7 @@ "scriptUrl": "./gospel-internet/gospel-internet.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" }, "instances": [ { diff --git a/public/dx-maps/gospel-internet/board/board/index.html b/public/dx-maps/gospel-internet/board/board/index.html index 3d5597212..b5910ac1b 100644 --- a/public/dx-maps/gospel-internet/board/board/index.html +++ b/public/dx-maps/gospel-internet/board/board/index.html @@ -36,7 +36,7 @@ - + - + - + - + - + - + - + \n\n\n" + "script": "\n\n\n\n\n" }, "instances": [ {