fix: results grid header — data rows bleed through above the column header row

[EVWorth]

Summary

In the results grid (non-virtualized path, used for queries returning ≤5000 rows), text from data rows visibly bleeds through above the column header row (id, title, company, location, etc.) when the grid is scrolled.

Steps to reproduce

1. Run a query that returns a result set with enough rows to require scrolling (a few hundred rows is enough)
2. Scroll the grid vertically
3. Observe the header row — data row text is visible above/through it instead of being cleanly occluded

Screenshot

Attached by reporter. Header row id | title | company | location has the underlying row text peeking above it (between the header cells and the top of the grid scroll container).

Root cause

src/components/grid/ResultsGrid.tsx:749-750 — the <table> uses border-collapse while the <thead> uses sticky top-0 z-10. This is a well-known Chromium/WebKit bug: position: sticky is silently ignored on <thead> (and <th>) when the table uses border-collapse: collapse.

Compounding this, ResultsGrid.tsx:750 — the <thead> itself has no background color. Only the <th> cells inside it have bg-[var(--color-bg-tertiary)] (lines 752, 759). Any gap between/around cells — or between the header and the scroll container edge — lets row content show through.

Fix

Two changes, both in the non-virtualized <table> path (ResultsGrid.tsx:749-798):

1. Switch the table layout

ResultsGrid.tsx:749 — change:

className="border-collapse text-xs"

to:

className="border-separate border-spacing-0 text-xs"

border-separate with border-spacing-0 keeps the visual identical but makes position: sticky work on the <thead> / <th>.

2. Add background to the <thead>

ResultsGrid.tsx:750 — change:

<thead className="sticky top-0 z-10">

to:

<thead className="sticky top-0 z-20 bg-[var(--color-bg-tertiary)]">

Move the same bg color up from the <th> cells onto the <thead> so the entire sticky strip is opaque, not just the cell interiors. (The <th> bg classes on lines 752 and 759 can stay — they're harmless and provide hover-state layering.)

3. Optional: bump z-index and isolate

ResultsGrid.tsx:586-592 — the scroll container is <div className="relative flex-1 overflow-auto">. Adding isolate z-0 (or just z-0) creates an explicit stacking context so the sticky header can't be painted under a sibling that establishes a higher one.

Virtualized path (audit, not required for this fix)

ResultsGrid.tsx:596 — the virtualized header wrapper <div className="sticky top-0 z-10 flex text-xs"> has no background either. Same fix pattern: add bg-[var(--color-bg-tertiary)] to the wrapper. Only relevant for queries returning >5000 rows, but worth fixing for parity.

Verification

1. Run a query returning ~500 rows
2. Scroll to the middle of the grid
3. Header row should stay pinned to the top with no row text visible above or through it
4. No visual regression on cell borders, hover states, or column resizing

Out of scope

• Refactoring ResultsGrid.tsx (already tracked as [Improvement] ResultsGrid.tsx is 874 lines — needs decomposition #146)
• Changing the column resize handle behavior
• The editor area above the grid is a sibling panel — it cannot leak through; this bug is entirely within the grid's own scroll container.