refactor(ui-react): block-main layout and EmptyState splash

[luizhf42]

What

Reworks the console page <main> into a block scroll container, then extracts the full-page splash screen — duplicated across seven onboarding/empty/locked/gated states — into a single shared EmptyState component.

Why

Two problems, the first enabling the second:

1. The old <main> was a flex column with overflow-y-auto. A scrollable flex container drops its padding-bottom in Chrome, so page content was clipped flush against the bottom edge with no padding.
2. The same splash markup (a centered card over a full-bleed decorative background, an optional feature grid, and a CTA) was copy-pasted across seven sites with divergent, ad-hoc implementations, each carrying a fragile min-h-[calc(100vh-3.5rem)] height hack to escape the layout.

Changes

• layout: <main> is now a plain block, absolutely positioned inside a relative size-full wrapper — its own scroll container, which honors p-8 pb-4. It wraps only the routed <Outlet>; the decorative grid-bg moves to a sibling. AppLayout and AdminLayout share the identical structure, dropping the flex-1 flex flex-col min-h-0 chain pages used to inherit.
• EmptyState: new component (icon, overline, title, description, accent, optional features/footnote, children CTA slot) that owns the full-bleed background. Web Endpoints, Public Keys, Firewall Rules, Secure Vault (empty + locked), and admin Unauthorized migrate to it; FeatureGate delegates to it. The per-page calc() and negative-margin hacks are gone.
• accessibility: splash CTAs that lacked a focus-visible ring now have one; the splash renders a real <h1> named via aria-labelledby and a <ul> feature list.
• WelcomeScreen: adapted to the block <main> (min-h-full, since flex-1 is now inert); kept separate as the richer dashboard hero.
• minor visual standardization: Web Endpoints' lone cyan accent orb is unified to blue, and the icon-badge shadow is now consistent across splashes.

Testing

EmptyState.test.tsx covers rendering, accent variants, the feature list, and the aria-labelledby wiring. Manually: open each migrated page in its empty state (clear/lock Secure Vault for both states; view a gated FeatureGate page on a CE build; hit admin Unauthorized as a non-admin). Confirm the centered card, full-bleed background, working CTAs, correct accent, and — the original bug — no bottom clipping. Also load a populated page to confirm normal content still renders correctly under the reworked <main>.

[github-actions]

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

---

Code Review Complete

Reviewed 11 files. 2 inline issues posted (1 high, 1 medium).

Both stem from the same root cause: <main> changed from a flex container to a block scroll container (absolute inset-0 overflow-y-auto), which breaks pages that rely on flex-1 to fill available height. Adding flex flex-col back to <main> in both layouts preserves the block-layout fix for padding/scrolling while keeping flex-item growth working for child pages.

• AppLayout.tsx (high): BannerEdit.tsx's textarea collapses to intrinsic height (~2 rows) because its flex-1 chain no longer has a flex parent.
• AdminLayout.tsx (medium): Loading/error states in Dashboard, SessionDetails, and License lose vertical centering for the same reason.

---

If you've addressed the feedback and want a new review, tag @shellhub-io/admin and a team member can trigger it.

[gustavosbarreto]

/review

[github-actions]

Claude finished @gustavosbarreto's task in 10s —— View job

---

Code Review Complete

Reviewed 16 files across code quality, security, testing, language patterns, and architecture — no issues found. The code looks good as-is.

If you push additional changes and want a new review, tag @shellhub-io/admin and a team member can trigger it.

---