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

Tighten the vertical legend's row spacing without touching the type
Some checks are pending
build-gate / build (push) Waiting to run
Details

Browse source 
Driver: "the spacing between the rows is too thick, they take up way too much
height -- the padding should be decreased per row."

Row vertical padding 3px -> 1px, min-height 22px -> 18px, section header
padding 8px -> 5px.

Font-size is deliberately untouched at 12px. It is not a lever here: the
Driver previously rejected shrinking it ("super tiny text that cannot be
read"), and the note beside .fr-lbl records that the width for the count came
from the bar and the gutters for the same reason. Only whitespace moved.
min-height 18px still clears a 12px glyph at line-height 1.3, so no descender
is clipped.

Measured live at 1440x900 with four sections open, 69 rows rendered:
  row height 24px -> 20px
  computed padding 1px/1px, font-size 12px unchanged
  rail content height 1966px -> 1424px (542px saved)
This commit is contained in:
doxa-maps-88655c70 2026-09-23 19:58:39 +00:00
parent 02baa2d42b
commit e5c66272c2
8 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
plugin-designs/research-dashboard/src/components/dashboards/DashboardFacetRail.vue
View file

@ -480,7 +480,7 @@ useShadowStyles(`
.rd-facets .fr-body::-webkit-scrollbar-thumb{ background:var(--dx-scroll-thumb, #c4c8c0); border-radius:8px; }
.rd-facets .fr-body::-webkit-scrollbar-thumb:hover{ background:#9aa197; }
.fr-sec{ border-bottom:1px solid var(--rd-line, #d1d4cd); }
.fr-sech{ display:flex; align-items:center; gap:6px; padding:8px 12px; cursor:pointer; user-select:none;
.fr-sech{ display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--rd-muted, #6d766e); }
.fr-sech:hover{ background:var(--rd-bg, #f3f3f1); }
.fr-sech .chev{ margin-left:auto; transition:transform .15s; font-size:10px; color:var(--dx-muted, #6d766e); }
@ -491,7 +491,17 @@ useShadowStyles(`
spacing that the gap used to provide is restored by margin-left on .fr-lbl below. */
/* min-height replaces an implicit one-line height so a WRAPPED label (see .fr-lbl) grows the
row instead of overflowing it; single-line rows keep their previous rhythm. */
.fr-row{ position:relative; display:flex; align-items:center; gap:0; padding:3px 12px 3px 14px; min-height:22px; cursor:pointer; font-size:12px; color:var(--dx-text, #3b463d); }
/* ★ TIGHTENED 2026-09-23 (Driver: "the spacing between the rows is too thick, they take up way
too much height -- the padding should be decreased per row"). Vertical padding 3px -> 1px and
min-height 22px -> 18px, which at 4px saved per row is ~276px across the 69 rows the rail
renders with its four sections open -- most of a viewport.
★ FONT-SIZE IS NOT A LEVER HERE and must not become one: the Driver explicitly rejected
shrinking it ("super tiny text that cannot be read"), and the note below at .fr-lbl records
that the width for the count came from the BAR and the gutters for the same reason. 12px
stays; only the whitespace around it moves.
min-height 18px still clears a 12px glyph at line-height 1.3 (15.6px), so this tightens the
row without clipping a descender. */
.fr-row{ position:relative; display:flex; align-items:center; gap:0; padding:1px 12px 1px 14px; min-height:18px; cursor:pointer; font-size:12px; color:var(--dx-text, #3b463d); }
.fr-row:hover{ background:var(--dx-surface, #f3f3f1); }
/* Indentation is carried by the TRUNK SPANS (one 12px span per ancestor level), not by
padding-left — so depth is drawn as a connected tree instead of implied by whitespace.

4
public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid.js generated
View file

@ -418,13 +418,13 @@
.rd-facets .fr-body::-webkit-scrollbar-thumb{ background:var(--dx-scroll-thumb, #c4c8c0); border-radius:8px; }
.rd-facets .fr-body::-webkit-scrollbar-thumb:hover{ background:#9aa197; }
.fr-sec{ border-bottom:1px solid var(--rd-line, #d1d4cd); }
.fr-sech{ display:flex; align-items:center; gap:6px; padding:8px 12px; cursor:pointer; user-select:none;
.fr-sech{ display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--rd-muted, #6d766e); }
.fr-sech:hover{ background:var(--rd-bg, #f3f3f1); }
.fr-sech .chev{ margin-left:auto; transition:transform .15s; font-size:10px; color:var(--dx-muted, #6d766e); }
.fr-sech.closed .chev{ transform:rotate(-90deg); }
.fr-rows{ padding-bottom:6px; }
.fr-row{ position:relative; display:flex; align-items:center; gap:0; padding:3px 12px 3px 14px; min-height:22px; cursor:pointer; font-size:12px; color:var(--dx-text, #3b463d); }
.fr-row{ position:relative; display:flex; align-items:center; gap:0; padding:1px 12px 1px 14px; min-height:18px; cursor:pointer; font-size:12px; color:var(--dx-text, #3b463d); }
.fr-row:hover{ background:var(--dx-surface, #f3f3f1); }
.fr-trunk{ position:relative; flex:0 0 auto; width:12px; align-self:stretch; }
.fr-trunk-pipe::before,

2
public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid/default/index.html generated
View file

@ -40,7 +40,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <dashboard-plus-grid> custom element. -->
<script src="../../dashboard-plus-grid.js" integrity="sha384-iEzO2owJW+rtpMu0Q/TCdLWh4GPVkUcJFyHHtmGKwSiaVJOa0Mtle3M/AEQJJm0E" crossorigin="anonymous"></script>
<script src="../../dashboard-plus-grid.js" integrity="sha384-MbVOlkO0f80hxAA+LYHRv/GXQlQo99AzPpJ2LrRoOFkCAkSqCnd9D8IDGghbW5/z" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid/index.html generated
View file

@ -40,7 +40,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <dashboard-plus-grid> custom element. -->
<script src="../dashboard-plus-grid.js" integrity="sha384-iEzO2owJW+rtpMu0Q/TCdLWh4GPVkUcJFyHHtmGKwSiaVJOa0Mtle3M/AEQJJm0E" crossorigin="anonymous"></script>
<script src="../dashboard-plus-grid.js" integrity="sha384-MbVOlkO0f80hxAA+LYHRv/GXQlQo99AzPpJ2LrRoOFkCAkSqCnd9D8IDGghbW5/z" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/index.html generated
View file

File diff suppressed because one or more lines are too long

8
public/doxa-maps/manifest.json generated
View file

@ -193,7 +193,7 @@
"bundle": "dashboard-plus-grid",
"scriptUrl": "./dashboard-plus-grid/dashboard-plus-grid.js",
"output": "doxa-maps/dashboard-plus-grid/dashboard-plus-grid.js",
"integrity": "sha384-iEzO2owJW+rtpMu0Q/TCdLWh4GPVkUcJFyHHtmGKwSiaVJOa0Mtle3M/AEQJJm0E",
"integrity": "sha384-MbVOlkO0f80hxAA+LYHRv/GXQlQo99AzPpJ2LrRoOFkCAkSqCnd9D8IDGghbW5/z",
"elements": [
"dashboard-plus-grid"
],
@ -213,7 +213,7 @@
"scriptUrl": "./dashboard-plus-grid/dashboard-plus-grid.js",
"embed": {
"iframe": "<iframe src=\"./dashboard-plus-grid/dashboard-plus-grid/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./dashboard-plus-grid/dashboard-plus-grid.js\" integrity=\"sha384-iEzO2owJW+rtpMu0Q/TCdLWh4GPVkUcJFyHHtmGKwSiaVJOa0Mtle3M/AEQJJm0E\" crossorigin=\"anonymous\"></script>\n<dashboard-plus-grid profile-config='{\"profile\":\"dashboard-plus-grid\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></dashboard-plus-grid>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./dashboard-plus-grid/dashboard-plus-grid.js\" integrity=\"sha384-MbVOlkO0f80hxAA+LYHRv/GXQlQo99AzPpJ2LrRoOFkCAkSqCnd9D8IDGghbW5/z\" crossorigin=\"anonymous\"></script>\n<dashboard-plus-grid profile-config='{\"profile\":\"dashboard-plus-grid\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></dashboard-plus-grid>"
},
"instances": [
{
@ -878,7 +878,7 @@
"bundle": "research-dashboard",
"scriptUrl": "./research-dashboard/research-dashboard.js",
"output": "doxa-maps/research-dashboard/research-dashboard.js",
"integrity": "sha384-unCdSEXmigfoEIKbn8CK0v8mUWgiheBFJUz3/nETrxtOEY2h/dIhCq9mjYMSeKWm",
"integrity": "sha384-N7jBTcEBb9f4tpzH8y5q6rD4b7hMf26rQeoBeMYfhSkiu1qjgDaBLYTU6BLrKqPW",
"elements": [
"research-dashboard-map"
],
@ -894,7 +894,7 @@
"scriptUrl": "./research-dashboard/research-dashboard.js",
"embed": {
"iframe": "<iframe src=\"./research-dashboard/research-dashboard/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./research-dashboard/research-dashboard.js\" integrity=\"sha384-unCdSEXmigfoEIKbn8CK0v8mUWgiheBFJUz3/nETrxtOEY2h/dIhCq9mjYMSeKWm\" crossorigin=\"anonymous\"></script>\n<research-dashboard-map profile-config='{\"profile\":\"research-dashboard\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></research-dashboard-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./research-dashboard/research-dashboard.js\" integrity=\"sha384-N7jBTcEBb9f4tpzH8y5q6rD4b7hMf26rQeoBeMYfhSkiu1qjgDaBLYTU6BLrKqPW\" crossorigin=\"anonymous\"></script>\n<research-dashboard-map profile-config='{\"profile\":\"research-dashboard\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></research-dashboard-map>"
},
"bundle": "research-dashboard"
}

4
public/doxa-maps/research-dashboard/research-dashboard.js generated
View file

@ -420,13 +420,13 @@
.rd-facets .fr-body::-webkit-scrollbar-thumb{ background:var(--dx-scroll-thumb, #c4c8c0); border-radius:8px; }
.rd-facets .fr-body::-webkit-scrollbar-thumb:hover{ background:#9aa197; }
.fr-sec{ border-bottom:1px solid var(--rd-line, #d1d4cd); }
.fr-sech{ display:flex; align-items:center; gap:6px; padding:8px 12px; cursor:pointer; user-select:none;
.fr-sech{ display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--rd-muted, #6d766e); }
.fr-sech:hover{ background:var(--rd-bg, #f3f3f1); }
.fr-sech .chev{ margin-left:auto; transition:transform .15s; font-size:10px; color:var(--dx-muted, #6d766e); }
.fr-sech.closed .chev{ transform:rotate(-90deg); }
.fr-rows{ padding-bottom:6px; }
.fr-row{ position:relative; display:flex; align-items:center; gap:0; padding:3px 12px 3px 14px; min-height:22px; cursor:pointer; font-size:12px; color:var(--dx-text, #3b463d); }
.fr-row{ position:relative; display:flex; align-items:center; gap:0; padding:1px 12px 1px 14px; min-height:18px; cursor:pointer; font-size:12px; color:var(--dx-text, #3b463d); }
.fr-row:hover{ background:var(--dx-surface, #f3f3f1); }
.fr-trunk{ position:relative; flex:0 0 auto; width:12px; align-self:stretch; }
.fr-trunk-pipe::before,

2
public/doxa-maps/research-dashboard/research-dashboard/index.html generated
View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <research-dashboard-map> custom element. -->
<script src="../research-dashboard.js" integrity="sha384-unCdSEXmigfoEIKbn8CK0v8mUWgiheBFJUz3/nETrxtOEY2h/dIhCq9mjYMSeKWm" crossorigin="anonymous"></script>
<script src="../research-dashboard.js" integrity="sha384-N7jBTcEBb9f4tpzH8y5q6rD4b7hMf26rQeoBeMYfhSkiu1qjgDaBLYTU6BLrKqPW" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order: