Console - Full-screen page mode for SQL and RPCN editors

[SpicyPete]

Summary

• Footer pins to the viewport bottom on short pages.
• Topics and security-tab pages drop ListLayout's forced min-h-screen (min-h-0 override), removing large dead whitespace at bottom.
• Embedded Console cancels the Cloud UI host gutters with measured negative margins and owns its page gutter (px-12) — deploy-order-safe with cloud-ui removing its p-10 later.
• New expanded-page mode: data-page-expanded on (utils/page-expanded)
  • useExpandedPageMode hook release every shell's horizontal constraints via global CSS while the page stays in document flow, footer below. The SQL studio's fixed-overlay fullscreen is replaced by this in-flow mode, and the RPCN pipeline editor gains the same toggle; both place the shared ExpandedPageToggle at the top-right of their work surface, clear of Save.
• /sql becomes a normal route; new breadcrumbOnlyHeader staticData flag keeps the app header breadcrumb-only for pages with their own title bar.

Screenshots

Footer always bottom

Before -> After

RPCN full screen

[github-actions]

✅ Clean — no registry drift, off-token colours, or ad-hoc classes

App: frontend · Scope: diff vs origin/master · Files: 17

	Count
⚠️ Outdated registry components	0
🛠 Locally-modified components	0
❓ Unknown to registry	0
🎨 Off-token palette colours	0
🔢 Ad-hoc utility classes	0

Generated by lookout audit-changes.

[SpicyPete]

@claude review

[github-actions]

Claude finished @SpicyPete's task in 3m 1s —— View job

---

Code review

• Read the diff and new files
• Analyze layout/CSS changes (footer, expanded-page mode)
• Analyze RPCN + SQL editor changes
• Analyze routing / federation changes
• Post review feedback

Reviewed against origin/master (PR range ce69db1..HEAD). Overall this is a strong, well-reasoned change — the standout is replacing the SQL studio's imperative fixed-overlay + scroll-lock machinery (-274 lines) with a shared in-flow useExpandedPageMode hook reused by RPCN. The comments explaining the why (measured margins for deploy-order safety, visibility via ResizeObserver, specificity of the global CSS) are genuinely helpful. Nicely done.

A few things worth a look before merge:

---

1. measureReservedBelow counts #mainLayout's own (negative) bottom margin — footer.tsx

In embedded mode useCancelHostGutters writes a negative margin-bottom onto #mainLayout. measureReservedBelow adds the target's own marginBottom into reserved:

for (let el = target; el && el !== document.documentElement; el = el.parentElement) {
  reserved += Number.parseFloat(style.marginBottom) || 0;   // target's own margin included
  ...
}

A negative marginBottom makes reserved negative, which inflates minHeight by the host's bottom-padding amount, so #mainLayout can be stretched slightly taller than the viewport → spurious vertical scrollbar in embedded mode. The MutationObserver on style re-measures but converges to the same inflated value. Consider clamping the target's own margin contribution to >= 0, or skipping the target's margin entirely (a negative margin isn't "reserved space below"). Worth verifying visually in the embedded Cloud UI host. Fix this →

2. Hardcoded h-[calc(100dvh-7rem)] in embedded mode — sql-workspace.tsx / RPCN index.tsx

The comment reads "7rem = app header + pt-8". That's correct for the self-hosted __root layout, but the federated layout (federated-routes.tsx) doesn't render Console's app header (the host does) and doesn't wrap the outlet in pt-8. So in embedded mode the real top offset differs from 7rem, and the surface can end up short or overflow by that delta. Since RPCN already shipped this way it may be acceptable in practice — but now that SQL adopts the same value, it'd be good to confirm both look right embedded, or derive the offset rather than hardcode it.

3. Two JS mechanisms both mutate #mainLayout and observe overlapping nodes

useBottomPinnedFooter sets min-height while useCancelHostGutters sets margin, and the footer's MutationObserver intentionally re-fires on the margin write. The change-guards mean it converges (cancel-gutters doesn't observe #mainLayout itself, so there's no true cycle), but it's worth a quick check for ResizeObserver loop completed with undelivered notifications warnings in embedded mode under resize. Not blocking, just a watch item.

4. max-width: 100vw in the release rule — index.scss

100vw includes the scrollbar gutter, so it can exceed the available content width when a vertical scrollbar is present (classic 100vw overflow gotcha). Here it's a max-width cap on a flex/container child whose width is already parent-bound, so it likely never binds — but 100% would sidestep the gotcha entirely if the cap is only there to give the transition something to animate to.

---

Minor / nits

• ListLayout internally does cn('... min-h-screen ...', className), so the min-h-0 overrides passed on topics/security tabs resolve correctly via tailwind-merge. ✅ Good, verified.
• useExpandedPageMode correctly clears data-page-expanded on unmount via the ref(null) callback and on display:none via the ResizeObserver 0×0 signal — the stale-attribute-bleeds-to-next-page risk called out in the doc comment is handled. ✅
• SQL keeps the prior rp-sql-studio-mode storage key, so existing user fullscreen prefs carry over. ✅
• Hook ordering in AppFooter is safe — useBottomPinnedFooter(hidden) is called before the if (hidden) return null. ✅
• ExpandedPageToggle has both aria-label and title. ✅

Nothing here is a hard blocker; #1 is the one I'd most want confirmed against the embedded host. I didn't run the build/tests (review-only) — bun run type:check && bun run lint && bun run test per the frontend guide would be the standard gate.
· branch polish/full-screen-rpcn-support