WIP: PR2

.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',
 };
 ```

AGENTS.md

@@ -1,7 +1,7 @@
 <!-- gitnexus:start -->
 # 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.
 

CLAUDE.md

@@ -1,7 +1,7 @@
 <!-- gitnexus:start -->
 # 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.
 

examples/view/base/table-v2.vue

@@ -356,7 +356,7 @@ const headerColumns = [
       <h2 class="section-title">9. {{ sections[8].label }}</h2>
       <p class="section-desc">
         Control column widths with <code>width</code> (fixed) and <code>minWidth</code> (flexible). Columns without
-        explicit width use <code>flexGrow: 1</code> to fill remaining space.
+        explicit width use auto-derived flex factors greater than <code>1</code> to fill remaining space.
       </p>
 
       <ListTableV2

packages/base/data/list-table-v2/list-table-v2.vue

@@ -312,29 +312,34 @@ const tableContainerStyle = computed(() => {
 // Column styling
 // =============================================================================
 function getColumnStyle(col: ListTableColumn<T>): Record<string, string> {
+  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" };
   }
+
+  // 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 {
-      flex: `${config.flexGrow} ${config.flexShrink} ${config.flexBasis}px`,
+    flex: `${config.flexGrow} ${config.flexShrink} ${flexBasis}px`,
     minWidth: `${config.minWidth}px`,
     maxWidth: `${config.maxWidth}px`,
   };
-  }
-
-  // Use the yoga-computed width directly for consistent measurement
-  return {
-    width: `${computedWidth}px`,
-    minWidth: `${computedWidth}px`,
-    maxWidth: `${computedWidth}px`,
-  };
 }
 
 // =============================================================================

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);
 }
 
 /**