fix(layout): prevent result pane from appearing at top of page

[gcko]

PR checklist

• Ensure you have added or ran the appropriate tests for your PR.
• DCO signed

What type of PR is this?

Bug fix

What this PR does / why we need it:

Fixes an intermittent bug where query result windows (profile, row count diff, etc.) sometimes render at the top of the page instead of the bottom half of the split pane.

Root cause: The react-split library has two code paths for handling prop changes:

1. Simple path (setSizes): triggered when only sizes changes — just updates element dimensions
2. Destructive path (destroy + recreate): triggered when gutterSize, minSize, or other props change — destroys the split instance, re-measures DOM, and rebuilds from scratch

The old code changed gutterSize (0→5), minSize (0→100), and sizes simultaneously when toggling panels. This triggered the destructive path, which has a race condition: it measures DOM dimensions during React's componentDidUpdate, but with CSS contain: size on the container, measurements can be unreliable — sometimes causing split.js to miscalculate positions.

Fix: Keep gutterSize and minSize constant across all split panes so only sizes changes, using the safe setSizes() path. Gutters are hidden via a CSS class when panels are collapsed.

Files changed:

• MainLayout.tsx — HSplit (history panel) and VSplit (result pane)
• LineageViewOss.tsx — HSplit (node detail panel)
• SandboxView.tsx — VSplit (sandbox result pane)
• splitStyles.css — .split-gutter-hidden CSS rule
• MainLayout.test.tsx — 20 new tests verifying prop stability

Which issue(s) this PR fixes:

Fixes DRC-2788

Special notes for your reviewer:

This bug was intermittent because it depended on browser layout timing — sometimes the DOM measurements happened after layout completed (working correctly), sometimes before (broken). The fix eliminates the measurement entirely by avoiding react-split's destroy/recreate code path.

Does this PR introduce a user-facing change?:

Fix: Query result panels (profile, row count diff, etc.) no longer intermittently appear at the top of the page instead of the bottom split pane.

Test plan

Test 1: Profile from Lineage (primary repro from ticket)

1. Go to Lineage view
2. Click on any model node
3. In the NodeView sidebar, click "Profile"
4. Expected: Result pane opens in the bottom half of the screen
5. Repeat 5-10 times — it should be consistent every time (previously this was intermittent)

Test 2: Row Count Diff from Lineage

1. Go to Lineage view
2. Click on any model node
3. Click "Row Count" in the NodeView sidebar
4. Expected: Result pane opens in the bottom half
5. Close the result pane, repeat several times

Test 3: Node Detail Panel (right sidebar)

1. Go to Lineage view with no node selected
2. Click on a model node to open the detail panel on the right
3. Expected: The right panel slides in smoothly, no layout jumping
4. Click away to close it, then click another node — repeat 5+ times

Test 4: History Panel Toggle

1. Open a run result (via profile or row count)
2. Toggle the History panel open/closed
3. Expected: History panel appears on the left without any layout glitching
4. Toggle rapidly several times

Test 5: Sandbox/Query View

1. Go to Query page or open the Sandbox
2. Run a query
3. Expected: Result pane appears in the bottom half, not the top

Test 6: Rapid toggling stress test

1. Open a result pane, close it, open it, close it — rapidly ~10 times
2. Expected: Result pane always appears in the correct (bottom) position, no flicker or misposition

Tips for testing

• The original bug was more likely to reproduce on first load or when the browser was under load
• Try with DevTools open (adds CPU pressure) to increase chance of catching timing issues
• Try on both localhost and a deployed preview if available

🤖 Generated with Claude Code

[iamcxa]

Code review by AI agents (code-reviewer + comment-analyzer + silent-failure-hunter).

Overall: The fix is sound and well-executed. Keeping gutterSize and minSize constant forces react-split to use the safe setSizes() path, avoiding the destroy/recreate race condition. The test coverage (20 tests for prop stability) is thorough, the PR description is excellent, and the code comment in MainLayout.tsx was verified against the library source.

3 minor observations below.

[iamcxa]

LGTM

[wcchang1115]

LGTM, thanks!