From 9fd520577bff9e6b1e549598a1442e3421ccd004 Mon Sep 17 00:00:00 2001
From: doxa-maps-88655c70
 <88627970+doxa-maps-88655c70@users.noreply.github.com>
Date: Sun, 20 Sep 2026 05:47:38 +0000
Subject: [PATCH] Trim table chrome to the 4px grid; recovers 64px of column
 width at narrow viewports

---
 .../components/dashboards/DashboardDataTable.vue    | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/plugin-designs/research-dashboard/src/components/dashboards/DashboardDataTable.vue b/plugin-designs/research-dashboard/src/components/dashboards/DashboardDataTable.vue
index d2739083f..1eada3c80 100644
--- a/plugin-designs/research-dashboard/src/components/dashboards/DashboardDataTable.vue
+++ b/plugin-designs/research-dashboard/src/components/dashboards/DashboardDataTable.vue
@@ -425,14 +425,23 @@ useShadowStyles(`
   .rd-grid::-webkit-scrollbar-thumb:hover{ background:#9aa197; }
   .rd-grid::-webkit-scrollbar-corner{ background:transparent; }
   .rd-thead{ position:sticky; top:0; z-index:2; display:flex; background:var(--dx-surface, #f3f3f1); border-bottom:1px solid var(--dx-line, #d1d4cd); }
-  .rd-th{ flex:1 1 0; min-width:0; padding:3px 8px; font-weight:700; color:var(--dx-text, #3b463d); cursor:pointer; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  /* padding 4px 4px, not 3px 8px — two reasons, both from the standards reference.
+     (1) SPACE: measured at 1280 the eight columns need 721px of pure content against ~727px of column
+     space, so 16px of horizontal padding per column (128px total) is unaffordable. Trimming to 8px/col
+     recovers 64px and takes the shortfall from 122px to 58px. The reference is explicit that when space
+     is tight you cut PADDING AND CHROME FIRST, never type size.
+     (2) GRID: 3px was off the 4px spacing grid (the reference's 'never use 3, 5, 7, 10, 13, 15px').
+     HONEST LIMIT: this IMPROVES 1280, it does not solve it — 8 text columns genuinely do not fit there.
+     Closing that gap is a product call (drop a column at narrow widths, or scroll horizontally), not a
+     CSS one. At 1440 the table already fits with 0 of 8 truncated. */
+  .rd-th{ flex:1 1 0; min-width:0; padding:4px 4px; font-weight:700; color:var(--dx-text, #3b463d); cursor:pointer; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
   .rd-th.num{ text-align:right; } .rd-th.chk{ flex:0 0 30px; cursor:default; text-align:center; padding:6px 0; }
   /* sort indicator — the glyph carries the meaning; colour only needs to read as ACTIVE
      against the muted header row, so it takes primary ink rather than a hue of its own. */
   .rd-th .ind{ font-size:9px; color:var(--dx-text, #3b463d); margin-left:3px; }
   .rd-row{ display:flex; height:26px; line-height:16px; border-bottom:1px solid var(--dx-surface, #f3f3f1); align-items:center; }
   .rd-row:hover{ background:var(--dx-surface, #f3f3f1); } .rd-row.sel{ background:#fff7ec; box-shadow:inset 3px 0 0 #e67e22; }
-  .rd-td{ flex:1 1 0; min-width:0; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dx-text, #3b463d); }
+  .rd-td{ flex:1 1 0; min-width:0; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dx-text, #3b463d); }
   .rd-td.num{ text-align:right; font-variant-numeric:tabular-nums; } .rd-td.chk{ flex:0 0 30px; text-align:center; padding:0; }
   .rd-foot{ flex:0 0 auto; display:flex; border-top:2px solid var(--dx-line, #d1d4cd); background:var(--dx-surface, #f3f3f1); font-weight:700; height:28px; align-items:center; color:var(--dx-text, #3b463d); }
   .rd-foot .rd-td{ color:var(--dx-text, #3b463d); }