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

Trim table chrome to the 4px grid; recovers 64px of column width at narrow viewports

Browse source
This commit is contained in:
doxa-maps-88655c70 2026-09-20 05:47:38 +00:00
parent 4a3eb5e445
commit 9fd520577b
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
plugin-designs/research-dashboard/src/components/dashboards/DashboardDataTable.vue
View file

@ -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); }