fix(layout): keep pages inside main when the production banner is shown

[thomaswasle]

Problem

When the active connection's environment is set to production, the last row of
the results grid is cut off horizontally — roughly half a row is clipped at the
bottom edge of the window, and it cannot be scrolled into view.

Cause

<main> in MainLayout is a flex column that holds the ProductionBanner
(shrink-0) followed by the routed page. But the pages size themselves with
h-full:

• src/pages/Editor.tsx — flex flex-col h-full bg-base
• src/components/layout/SplitPaneLayout.tsx — relative h-full w-full
• src/pages/Connections.tsx, src/pages/Settings.tsx, src/pages/McpPage.tsx

height: 100% resolves against the full height of <main>, so it does not
subtract the ~18px the banner already consumed. The page renders taller than the
space left for it, main's overflow-hidden clips the overflow at the bottom,
and the bottom of the data grid's overflow-auto scroll container — the last
row — gets sliced.

Without the banner the numbers happen to line up, which is why this only shows up
on production-flagged connections.

Fix

Wrap the routed content (SplitPaneLayout / Outlet) in a
flex-1 min-h-0 min-w-0 container. The wrapper is a correctly sized flex item
that accounts for the banner, and the pages' h-full now resolves against it.

This fixes the whole page rather than just the grid, so the split-pane view and
the editor/results resize geometry also stop being off by the banner height while
a production connection is active.

Testing

• Manual: opened a table tab on a connection with environment = production —
  the last row now ends flush with the grid border and is fully scrollable.
• Verified the non-production case and the split-pane view are unchanged.
• tsc --noEmit and eslint clean.

closes #682

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 file)

• src/components/layout/MainLayout.tsx

---

_{Reviewed by glm-5.2 · Input: 16.2K · Output: 1.1K · Cached: 107.6K}