Selection turns the table bar into a toolbar instead of a flood

Driver: "when I click on a people group the header of the table is flooded with buttons that overflow and don't make sense" -- and, on one of them: "it does not need a Clear Selected button in the header because the footer of the page already gives me that." THE CLEAR X IS GONE from the header pill. Verified what actually clears before repeating the premise: the thead master checkbox and the detail drawer's close both call clearSelection, so the removal deletes a duplicate trigger, not the capability. THE FLOOD HAD TWO CAUSES, both measured at 1280 where the middle column is 686px: the centred hint, and -- after hiding it -- the in-flow title squeezed to 48px and wrapped INTERNALLY ("People"/"Groups" on two lines), growing the bar to 43px and tumbling the spacer. While a selection exists the title and count duplicate what the pill and the section header already say, so all three yield, state-scoped, and return on clear. The title also gets white-space nowrap unconditionally: a title may never two-line itself. Playwright, both 1280 and 1440, real dispatched clicks, full round trip: select -> bar 32px, one line, zero overflowing controls, no clear x; uncheck -> count 0, title and count return.
2026-09-23 21:46:21 +00:00 · 2026-09-23 21:46:21 +00:00 · 8d41a8fdef
commit 8d41a8fdef
parent d9eca08c44
8 changed files with 106 additions and 71 deletions
--- a/plugin-designs/research-dashboard/src/components/dashboards/DashboardDataTable.vue
+++ b/plugin-designs/research-dashboard/src/components/dashboards/DashboardDataTable.vue
@ -602,6 +602,24 @@ useShadowStyles(`
    pointer-events:none; color:var(--dx-muted, #6d766e); font-size:12px; }
  /* Hidden where the clusters would collide with it — at narrow widths there is no free middle. */
  @media (max-width: 1100px){ .rd-bar-hint{ display:none; } }
+  /* ★ THE BAR IS A SELECTION TOOLBAR WHILE A SELECTION EXISTS (the 1280px flood, measured: with
+     one row selected the bar wrapped to 43px and pushed a control out of it -- the Driver's
+     "flooded with buttons that overflow"). The centred hint and the selection cluster cannot both
+     fit a 666px middle column, and the hint is the one carrying redundant information there: its
+     count already lives in the selection pill. It yields exactly while a selection exists and
+     returns the moment the selection clears -- state-scoped, so the resting bar is unchanged.
+     (The 1100px media rule above is the same idea keyed on width; this one is keyed on state.) */
+  .rd-table-wrap:not([data-sel-count="0"]) .rd-bar-hint{ display:none; }
+  /* ★ MEASURED AT 1280 (the Driver's flood, second cause): hiding the hint was not enough -- the
+     in-flow title and count are separate children, and squeezed to 48px the title wrapped
+     INTERNALLY ("People"/"Groups" on two lines), growing the bar to 43px and tumbling the spacer.
+     While a selection exists they say nothing the bar does not already say -- the pill carries the
+     selection count and the composite's own section header above the table already reads "People
+     Groups" -- so they yield with the hint and return on clear. After: every child on one 32px
+     line at 1280, zero overflow. */
+  .rd-table-wrap:not([data-sel-count="0"]) .ttl,
+  .rd-table-wrap:not([data-sel-count="0"]) .ct{ display:none; }
+  .ttl{ white-space:nowrap; }  /* and the title may never two-line itself, selection or not */
  /* Export CSV — lives on THIS bar now (moved from the dashboard topbar). Material-light DX palette:
     primary #92b195 surface, deep ink label, border #d1d4cd. Stays visible while collapsed. */
  .rd-table-bar .rd-csv{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; cursor:pointer; user-select:none;
@ -762,9 +780,18 @@ useShadowStyles(`
      <span class="ttl">People Groups</span>
      <span class="ct" data-table-count>{{ fmt(rowCount) }} {{ rowCount === 1 ? 'group' : 'groups' }}</span>
      <!-- role=status so assistive tech announces the count as the selection changes. -->
+      <!-- ★ NO CLEAR BUTTON IN THIS BAR (Driver 2026-09-23, on the selection flood: "it does not
+           need to give me a Clear Selected button in the header because the FOOTER of the page
+           already gives me that"). One action, one home; this pill is a status readout only.
+           ★ VERIFIED WHAT ACTUALLY CLEARS, rather than repeating the premise: no literal footer
+           clear exists in THIS component -- the surviving clear paths are the thead master
+           checkbox (un-checking it deselects all rows) and the detail drawer's close
+           (DashboardDetailDrawer.vue:104 calls bus.clearSelection()). Both remain, so removing
+           the header x removes a DUPLICATE, not the capability. clearSel() stays defined for the
+           bus and any future caller. This also deletes the one control in the cluster that read
+           as "a button that doesn't make sense" -- a bare x with no label. -->
      <span v-if="selCount" class="rd-pill" data-sel-pill role="status">
        <span>{{ fmt(selCount) }} selected</span>
-        <button title="Clear selection" aria-label="Clear selection" @click="clearSel">✕</button>
      </span>
      <!-- Selection VIEWS — separated from the pill because they mutate the VIEW, not the
           selection. Only meaningful once something is selected, so they appear with it. -->
--- a/public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid.js
+++ b/public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid.js
--- a/public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid/default/index.html
+++ b/public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid/default/index.html
@ -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-ZJr7t088o8vn8LM4eGvgV1PiFrxP31gt0yXKI8pUexx0ZopPzxt6Rbd83l+B6vMr" crossorigin="anonymous"></script>
+  <script src="../../dashboard-plus-grid.js" integrity="sha384-c3pbeire4r7R+SzWZa/jnmf14S2CKOGEldKvKJk9oyv9cc3EykR8ITb1Mazi4Af0" crossorigin="anonymous"></script>

  <script>
    // Mapbox token resolution — the A3 ladder, in precedence order:
--- a/public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid/index.html
+++ b/public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid/index.html
@ -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-ZJr7t088o8vn8LM4eGvgV1PiFrxP31gt0yXKI8pUexx0ZopPzxt6Rbd83l+B6vMr" crossorigin="anonymous"></script>
+  <script src="../dashboard-plus-grid.js" integrity="sha384-c3pbeire4r7R+SzWZa/jnmf14S2CKOGEldKvKJk9oyv9cc3EykR8ITb1Mazi4Af0" crossorigin="anonymous"></script>

  <script>
    // Mapbox token resolution — the A3 ladder, in precedence order:
--- a/public/doxa-maps/index.html
+++ b/public/doxa-maps/index.html
--- a/public/doxa-maps/manifest.json
+++ b/public/doxa-maps/manifest.json
@ -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-ZJr7t088o8vn8LM4eGvgV1PiFrxP31gt0yXKI8pUexx0ZopPzxt6Rbd83l+B6vMr",
+      "integrity": "sha384-c3pbeire4r7R+SzWZa/jnmf14S2CKOGEldKvKJk9oyv9cc3EykR8ITb1Mazi4Af0",
      "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-ZJr7t088o8vn8LM4eGvgV1PiFrxP31gt0yXKI8pUexx0ZopPzxt6Rbd83l+B6vMr\" 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-c3pbeire4r7R+SzWZa/jnmf14S2CKOGEldKvKJk9oyv9cc3EykR8ITb1Mazi4Af0\" 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-o3XcsjbqleZU3F/8mtQdGdCLJVgkHReedDapG/VG11tD68poM8jFq9rlg8u6dZKP",
+      "integrity": "sha384-czl1wL6/vRprToHEGJK5KEW0RxlfritI1CldVbHBUUxH34fxO1SxXtO7tKjohltp",
      "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-o3XcsjbqleZU3F/8mtQdGdCLJVgkHReedDapG/VG11tD68poM8jFq9rlg8u6dZKP\" 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-czl1wL6/vRprToHEGJK5KEW0RxlfritI1CldVbHBUUxH34fxO1SxXtO7tKjohltp\" 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"
        }
--- a/public/doxa-maps/research-dashboard/research-dashboard.js
+++ b/public/doxa-maps/research-dashboard/research-dashboard.js
--- a/public/doxa-maps/research-dashboard/research-dashboard/index.html
+++ b/public/doxa-maps/research-dashboard/research-dashboard/index.html
@ -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-o3XcsjbqleZU3F/8mtQdGdCLJVgkHReedDapG/VG11tD68poM8jFq9rlg8u6dZKP" crossorigin="anonymous"></script>
+  <script src="../research-dashboard.js" integrity="sha384-czl1wL6/vRprToHEGJK5KEW0RxlfritI1CldVbHBUUxH34fxO1SxXtO7tKjohltp" crossorigin="anonymous"></script>

  <script>
    // Mapbox token resolution — the A3 ladder, in precedence order: