buckaroo-data
diff --git a/‎.github/workflows/checks.yml‎
Lines changed: 100 additions & 0 deletions b/‎.github/workflows/checks.yml‎
Lines changed: 100 additions & 0 deletions
diff --git a/‎buckaroo/customizations/styling.py‎
Lines changed: 66 additions & 1 deletion b/‎buckaroo/customizations/styling.py‎
Lines changed: 66 additions & 1 deletion
@@ -407,6 +407,106 @@ jobs:
           path: packages/buckaroo-js-core/screenshots/
           if-no-files-found: ignore
 
+  StylingScreenshots:
+    name: Styling Screenshots (Before / After)
+    runs-on: depot-ubuntu-latest
+    timeout-minutes: 25
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.10.0
+      - name: Setup Node.js with pnpm cache
+        uses: actions/setup-node@v6
+        with:
+          cache: 'pnpm'
+          cache-dependency-path: 'packages/pnpm-lock.yaml'
+      - name: Cache Playwright browsers
+        uses: actions/cache@v5
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ hashFiles('packages/buckaroo-js-core/package.json') }}
+
+      # Save story + spec from current branch (baseline commit won't have them)
+      - name: Save story and spec files
+        run: |
+          mkdir -p /tmp/styling-stories
+          cp packages/buckaroo-js-core/src/stories/StylingIssues.stories.tsx /tmp/styling-stories/
+          cp packages/buckaroo-js-core/pw-tests/styling-issues-screenshots.spec.ts /tmp/styling-stories/
+
+      # ── Before screenshots (baseline b7956f8, pre-#587) ──
+      - name: Checkout baseline (b7956f8)
+        run: git checkout b7956f8
+      - name: Copy stories to baseline
+        run: |
+          cp /tmp/styling-stories/StylingIssues.stories.tsx packages/buckaroo-js-core/src/stories/
+          cp /tmp/styling-stories/styling-issues-screenshots.spec.ts packages/buckaroo-js-core/pw-tests/
+      - name: Install pnpm deps (baseline)
+        working-directory: packages
+        run: pnpm install --no-frozen-lockfile
+      - name: Install Playwright browsers
+        working-directory: packages/buckaroo-js-core
+        run: pnpm exec playwright install chromium
+      - name: Capture before screenshots
+        working-directory: packages/buckaroo-js-core
+        env:
+          SCREENSHOT_DIR: screenshots/before
+        run: |
+          pnpm storybook --no-open &
+          SB_PID=$!
+          timeout=60; elapsed=0
+          while ! curl -sf http://localhost:6006 > /dev/null 2>&1; do
+            sleep 2; elapsed=$((elapsed + 2))
+            if [ $elapsed -ge $timeout ]; then echo "Storybook failed to start"; exit 1; fi
+          done
+          pnpm exec playwright test pw-tests/styling-issues-screenshots.spec.ts --reporter=line || true
+          kill $SB_PID 2>/dev/null || true
+          lsof -ti:6006 | xargs kill -9 2>/dev/null || true
+
+      # ── After screenshots (current branch) ──
+      - name: Checkout current branch
+        run: |
+          git checkout -f ${{ github.event.pull_request.head.sha || github.sha }}
+          git clean -fd packages/
+      - name: Install pnpm deps (current)
+        working-directory: packages
+        run: pnpm install --no-frozen-lockfile
+      - name: Capture after screenshots
+        working-directory: packages/buckaroo-js-core
+        env:
+          SCREENSHOT_DIR: screenshots/after
+        run: |
+          pnpm storybook --no-open &
+          SB_PID=$!
+          timeout=60; elapsed=0
+          while ! curl -sf http://localhost:6006 > /dev/null 2>&1; do
+            sleep 2; elapsed=$((elapsed + 2))
+            if [ $elapsed -ge $timeout ]; then echo "Storybook failed to start"; exit 1; fi
+          done
+          pnpm exec playwright test pw-tests/styling-issues-screenshots.spec.ts --reporter=line
+          kill $SB_PID 2>/dev/null || true
+          lsof -ti:6006 | xargs kill -9 2>/dev/null || true
+
+      # ── Upload artifacts ──
+      - name: Upload before screenshots
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: styling-screenshots-before
+          path: packages/buckaroo-js-core/screenshots/before/
+          if-no-files-found: ignore
+      - name: Upload after screenshots
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: styling-screenshots-after
+          path: packages/buckaroo-js-core/screenshots/after/
+          if-no-files-found: ignore
+
   TestServer:
     name: Server Playwright Tests
     needs: [BuildWheel]
 
@@ -2,6 +2,61 @@
 from typing import Any
 from buckaroo.styling_helpers import obj_, float_, inherit_, pinned_histogram
 
+# Pixel-width estimation constants, calibrated to AG-Grid theme with
+# spacing:5, cellHorizontalPaddingScale:0.3, fontSize:12, headerFontSize:14
+_CHAR_PX_DATA = 7       # approx width per character in data cells
+_CHAR_PX_HEADER = 8     # approx width per character in header
+_CELL_PAD = 16          # total horizontal padding inside a cell
+_SORT_ICON = 14         # sort indicator + gap in header
+_HISTOGRAM_MIN_PX = 100 # minimum width for a histogram pinned row to render usefully
+_MIN_COL_PX = 30        # absolute floor
+
+
+def _formatted_char_count(displayer_args, column_metadata):
+    """Estimate the character count of the widest formatted value."""
+    d = displayer_args.get('displayer')
+
+    if d == 'float':
+        max_val = column_metadata.get('max', 0) or 0
+        min_val = column_metadata.get('min', 0) or 0
+        max_abs = max(abs(max_val), abs(min_val))
+        int_digits = max(1, len(str(int(max_abs)))) if max_abs == max_abs else 1  # nan guard
+        commas = (int_digits - 1) // 3
+        frac = displayer_args.get('max_fraction_digits', 0)
+        decimal = 1 if frac > 0 else 0
+        sign = 1 if min_val < 0 else 0
+        return int_digits + commas + decimal + frac + sign
+
+    if d == 'integer':
+        max_digits = displayer_args.get('max_digits', 4)
+        commas = (max_digits - 1) // 3
+        return max_digits + commas
+
+    if d == 'compact_number':
+        return 5  # e.g. "5.7B"
+
+    if d == 'string':
+        return min(displayer_args.get('max_length', 20), 20)
+
+    if d in ('datetimeLocaleString', 'datetimeDefault'):
+        return 18  # "12/31/2024, 11:59 PM"
+
+    return 8  # obj / fallback
+
+
+def estimate_min_width_px(displayer_args, header_name, column_metadata, has_histogram=False):
+    """Compute a per-column minWidth in pixels from content analysis."""
+    data_chars = _formatted_char_count(displayer_args, column_metadata)
+    data_px = data_chars * _CHAR_PX_DATA + _CELL_PAD
+
+    hdr_chars = len(str(header_name)) if header_name else 1
+    header_px = hdr_chars * _CHAR_PX_HEADER + _SORT_ICON + _CELL_PAD
+
+    width = max(data_px, header_px)
+    if has_histogram:
+        width = max(width, _HISTOGRAM_MIN_PX)
+    return max(width, _MIN_COL_PX)
+
 
 class DefaultMainStyling(StylingAnalysis):
     requires_summary = ["histogram", "is_numeric", "dtype", "_type"]
@@ -30,7 +85,17 @@ def style_column(kls, col:str, column_metadata: Any) -> Any:
         else:
             disp = {'displayer': 'obj'}
             base_config['tooltip_config'] = {'tooltip_type':'simple', 'val_column': str(col)}
-        base_config['displayer_args'] = disp 
+        base_config['displayer_args'] = disp
+
+        # Compute content-aware minWidth
+        header_name = column_metadata.get('orig_col_name', col)
+        has_histogram = any(
+            pr.get('displayer_args', {}).get('displayer') == 'histogram'
+            for pr in kls.pinned_rows
+        )
+        min_w = estimate_min_width_px(disp, header_name, column_metadata, has_histogram)
+        base_config['ag_grid_specs'] = {'minWidth': min_w}
+
         return base_config