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

Square panel: no child brings its own outline

Browse source 
ShareButton is not a .mcb. It wraps its button in a .share-wrap div carrying
border-radius:50% and a conic-gradient ring on ::before at inset:-2px, so the
button rules missed it and it kept a round rainbow halo inside the square
panel -- breaking the single-card illusion at the corner the eye lands on.

rega measured it at 390 and asked whether square should flatten it. It
should: in this variant the panel owns the outline, so a child may not bring
its own. The round default is untouched.

Gated, with a control asserting ShareButton really does carry a 50% radius,
so the two rules are not decorative.
This commit is contained in:
Doxa Maps 2026-09-27 22:44:08 +00:00
parent ddb2b77971
commit 9b150b902d
2 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
internal/check-square-map-controls.mjs
View file

@ -115,6 +115,18 @@ ok(/:only-child[^{]*\{[^}]*border-radius:\s*4px/.test(TOOLBAR), 'and a lone cont
ok(sqGap > -1 && sqGap < mq, 'CONTROL: the base square rule really does come BEFORE the media block, which is why the override is needed at all')
}
// ── 2c. NO CHILD BRINGS ITS OWN OUTLINE ──────────────────────────────────────────
// ShareButton is not a .mcb -- it wraps its button in .share-wrap with border-radius:50% and a
// conic-gradient ring on ::before -- so the button rules missed it and it kept a round rainbow halo
// inside the square panel. Found by rega at 390, not by me.
ok(/\.map-toolbar--square \.share-wrap \{[^}]*border-radius:\s*0/.test(TOOLBAR),
'the square panel flattens .share-wrap, which is a div and not a .mcb')
ok(/\.map-toolbar--square \.share-wrap::before \{[^}]*display:\s*none/.test(TOOLBAR),
"and suppresses its conic-gradient ring -- in this variant the PANEL owns the outline")
ok(/\.share-wrap\{[^}]*border-radius:50%/.test(readFileSync(join(REPO, 'library/components/map-controls/ShareButton.vue'), 'utf8').replace(/\s+/g, '')) ||
/border-radius:\s*50%/.test(readFileSync(join(REPO, 'library/components/map-controls/ShareButton.vue'), 'utf8')),
'CONTROL: ShareButton really does carry a 50% radius of its own, so the two rules above are not decorative')
// ── 3. forced colours, which the round buttons never had ────────────────────────────────────────
ok(/@media \(forced-colors: active\)/.test(TOOLBAR), 'the square variant ships a forced-colors block')
ok(/ButtonText/.test(TOOLBAR), 'using ButtonText, so the ring and dividers survive a replaced palette')

8
library/components/map-controls/MapToolbar.vue
View file

@ -98,6 +98,14 @@ useShadowStyles(`
.map-toolbar--square > * + * { border-top: 1px solid #ddd; }
/* .hbg-ctrl's 10px top margin would tear the panel apart; inside the group it has no business. */
.map-toolbar--square .hbg-ctrl { margin: 0; }
/* ★ ShareButton IS NOT A .mcb, so the rules above missed it. It wraps its button in a .share-wrap div
carrying border-radius:50% plus a conic-gradient ring on ::before at inset:-2px -- which inside the
panel reads as a circular rainbow halo poking out of one corner, breaking the single-card illusion
at exactly the place the eye lands. rega measured it at 390 and asked whether square should flatten
it; it should: in this variant the PANEL owns the outline, so a child may not bring its own.
The round default keeps its ring untouched. */
.map-toolbar--square .share-wrap { border-radius: 0; }
.map-toolbar--square .share-wrap::before { display: none; }
/* ★ OUTER CORNERS ONLY, AND NO overflow:hidden. Clipping would have been the quick way to round
the panel, but it also clips a focus ring on any inner button -- and the engine does not do it:
it rounds the first and last buttons instead (button:focus:first-child -> 4px 4px 0 0, :last-child