pt/pf_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the row-label floor three characters, not 130px

Browse Source 
130px was far too wide — it was a guess, and it turned the row labels into a
quarter of the sheet. The floor only needs to stop a column coming back
unusable after a layout restore, not to fit anything.

Three characters, measured in the grid's own font plus its cell padding
rather than fixed in pixels, so it survives a theme or zoom change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Trowbridge 2026-09-17 15:25:38 -04:00
parent 4045d336c4
commit a83138b3ce
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/views/Forecast.jsx
View File

@ -1098,22 +1098,34 @@ export default function Forecast({ sources = [], sourceId, versions = [], versio
// A minimum leaves the default spacing alone where it is already reasonable and // A minimum leaves the default spacing alone where it is already reasonable and
// only intervenes where a column came back unusably narrow. Anything already // only intervenes where a column came back unusably narrow. Anything already
// wider — set by dragging, or recorded in a layout — is untouched. // wider — set by dragging, or recorded in a layout — is untouched.
const MIN_ROW_LABEL_W = 130 // Three characters, measured in the grid's own font rather than guessed in
// pixels, so it holds up if the theme or zoom changes.
const MIN_ROW_LABEL_CHARS = 3
async function ensureRowLabelWidth() { async function ensureRowLabelWidth() {
const grid = (await viewerRef.current?.getPlugin())?.regular_table const grid = (await viewerRef.current?.getPlugin())?.regular_table
if (!grid?.saveColumnSizes) return if (!grid?.saveColumnSizes) return
const cells = [...grid.querySelectorAll('tbody th')]
const idxs = new Set() const idxs = new Set()
for (const cell of grid.querySelectorAll('tbody th')) { for (const cell of cells) {
const m = [...cell.classList].map(c => /^rt-col-(\d+)$/.exec(c)).find(Boolean) const m = [...cell.classList].map(c => /^rt-col-(\d+)$/.exec(c)).find(Boolean)
if (m) idxs.add(Number(m[1])) if (m) idxs.add(Number(m[1]))
} }
if (idxs.size === 0) return if (idxs.size === 0) return
const style = getComputedStyle(cells[0])
const ctx = (ensureRowLabelWidth._ctx ||= document.createElement('canvas').getContext('2d'))
ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
const min = Math.ceil(
ctx.measureText('0'.repeat(MIN_ROW_LABEL_CHARS)).width
+ parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)
)
const sizes = { ...grid.saveColumnSizes() } const sizes = { ...grid.saveColumnSizes() }
let changed = false let changed = false
for (const idx of idxs) { for (const idx of idxs) {
if ((sizes[idx] ?? 0) < MIN_ROW_LABEL_W) { sizes[idx] = MIN_ROW_LABEL_W; changed = true } if ((sizes[idx] ?? 0) < min) { sizes[idx] = min; changed = true }
} }
if (!changed) return if (!changed) return
grid.restoreColumnSizes(sizes) grid.restoreColumnSizes(sizes)