diff --git a/.trellis/spec/frontend/component-guidelines.md b/.trellis/spec/frontend/component-guidelines.md index afec38f..3259057 100644 --- a/.trellis/spec/frontend/component-guidelines.md +++ b/.trellis/spec/frontend/component-guidelines.md @@ -59,7 +59,9 @@ col.cellRenderer = ({ cellData, rowData }) => { ### Column Flex Distribution -For auto-distributed column widths (no explicit width), use `flexGrow: 1`: +For auto-distributed column widths (no explicit width), keep a minimum basis and +use flex factors greater than `1` so columns can absorb remaining row space after +scrollbar width and fixed columns are accounted for: ```typescript const col = { @@ -67,7 +69,8 @@ const col = { title: 'Name', dataKey: 'code', width: 120, // minimum width required - flexGrow: 1, // expands to fill available space + flexGrow: 1.2, // expands to fill available space + flexShrink: 1.2, // shrinks proportionally when space is tight align: 'center', }; ``` diff --git a/AGENTS.md b/AGENTS.md index 4742e4d..41c35cc 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,7 +1,7 @@ # GitNexus — Code Intelligence -This project is indexed by GitNexus as **noob-components** (749 symbols, 1584 relationships, 55 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely. +This project is indexed by GitNexus as **noob-components** (721 symbols, 1559 relationships, 53 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely. > If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first. diff --git a/CLAUDE.md b/CLAUDE.md index 4742e4d..41c35cc 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,7 +1,7 @@ # GitNexus — Code Intelligence -This project is indexed by GitNexus as **noob-components** (749 symbols, 1584 relationships, 55 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely. +This project is indexed by GitNexus as **noob-components** (721 symbols, 1559 relationships, 53 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely. > If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first. diff --git a/examples/view/base/table-v2.vue b/examples/view/base/table-v2.vue index d42d05f..00ea1fa 100644 --- a/examples/view/base/table-v2.vue +++ b/examples/view/base/table-v2.vue @@ -356,7 +356,7 @@ const headerColumns = [

9. {{ sections[8].label }}

Control column widths with width (fixed) and minWidth (flexible). Columns without - explicit width use flexGrow: 1 to fill remaining space. + explicit width use auto-derived flex factors greater than 1 to fill remaining space.

{ // Column styling // ============================================================================= function getColumnStyle(col: ListTableColumn): Record { + const config = computedConfigs.value.find((c) => c.key === col.key); + + const explicitWidth = col.width !== undefined && col.width !== "auto" ? Number(col.width) : undefined; + if (explicitWidth !== undefined && Number.isFinite(explicitWidth) && explicitWidth > 0) { + return { + flex: `0 0 ${explicitWidth}px`, + width: `${explicitWidth}px`, + minWidth: `${explicitWidth}px`, + maxWidth: `${explicitWidth}px`, + }; + } + // Find the column index to get the computed width const colIndex = columnsRef.value.findIndex((c) => c.key === col.key); const computedWidth = colIndex >= 0 ? columnWidths.value[colIndex] : 0; - if (!computedWidth || computedWidth <= 0) { - // Fallback to flex property if no computed width - const config = computedConfigs.value.find((c) => c.key === col.key); - if (!config) { - return { flex: "1 1 100px", minWidth: "50px", maxWidth: "300px" }; - } - return { - flex: `${config.flexGrow} ${config.flexShrink} ${config.flexBasis}px`, - minWidth: `${config.minWidth}px`, - maxWidth: `${config.maxWidth}px`, - }; + if (!config) { + return { flex: "1 1 100px", minWidth: "50px", maxWidth: "300px" }; } - // Use the yoga-computed width directly for consistent measurement + // Apply the computed flex factors to the real cells so the row can consume + // any remaining space after fixed-width columns and scrollbar width. + const flexBasis = computedWidth > 0 ? computedWidth : config.flexBasis; return { - width: `${computedWidth}px`, - minWidth: `${computedWidth}px`, - maxWidth: `${computedWidth}px`, + flex: `${config.flexGrow} ${config.flexShrink} ${flexBasis}px`, + minWidth: `${config.minWidth}px`, + maxWidth: `${config.maxWidth}px`, }; } diff --git a/packages/base/data/list-table-v2/usePretextColumnWidths.ts b/packages/base/data/list-table-v2/usePretextColumnWidths.ts index 75ef799..2cac166 100644 --- a/packages/base/data/list-table-v2/usePretextColumnWidths.ts +++ b/packages/base/data/list-table-v2/usePretextColumnWidths.ts @@ -19,6 +19,8 @@ const DEFAULT_PADDING = 16; const CELL_PADDING = DEFAULT_PADDING * 2; // left + right const MAX_WIDTH = 300; const MIN_BASE_WIDTH = 50; +const MIN_AUTO_FLEX = 1.1; +const MAX_AUTO_FLEX = 2; export interface ColumnFlexConfig { key: string; @@ -61,13 +63,13 @@ function computeStats(widths: number[]): { mean: number; variance: number } { /** * Derive flexGrow/flexShrink from variance score * varianceScore = min(1, σ / (μ * 0.5)) - * flex = 0.1 + varianceScore * 1.9 → range [0.1, 2.0] + * flex = 1.1 + varianceScore * 0.9 → range [1.1, 2.0] */ function varianceToFlex(mean: number, variance: number): number { - if (mean <= 0) return 0.1; + if (mean <= 0) return MIN_AUTO_FLEX; const stdDev = Math.sqrt(variance); const varianceScore = Math.min(1, stdDev / (mean * 0.5)); - return 0.1 + varianceScore * 1.9; + return MIN_AUTO_FLEX + varianceScore * (MAX_AUTO_FLEX - MIN_AUTO_FLEX); } /**