Fix Site Manager header and file browser tab layout

[akirk]

What

This PR fixes the Site Manager layout so the tab bar remains visible and usable when the File browser tab is selected.

The file browser and blueprint panes now stay bounded inside the tab panel, while the tab strip keeps its own background and stacking context so editor content cannot draw behind or over it.

Header Layout

It also refines the Site Manager header layout. The logo, title, description, primary actions, and overflow menu are split into explicit grid areas.

As the available width gets tighter, the primary action buttons move progressively into the Additional actions overflow menu instead of wrapping into the title or forcing the title into an awkward line flow.

This keeps the WordPress logo anchored at the top left, keeps the description beside and below the title area, and avoids action buttons colliding with the title during resize.

Blueprint Editor

The Blueprint tab now uses the available panel width for the editor instead of showing the file explorer sidebar. The current Blueprint path stays in a single line with ellipsis behavior, so it no longer collapses into a vertical column when space gets tight.

Screen Recording

sidebar-before-after.mp4

Verification

Verified with npm run format:uncommitted and npm exec nx lint playground-website -- --files=packages/playground/website/src/components/blueprint-editor/BlueprintBundleEditor.tsx,packages/playground/website/src/components/blueprint-editor/SiteBlueprintBundleEditor.tsx,packages/playground/website/src/components/blueprint-editor/blueprint-bundle-editor.module.css,packages/playground/website/src/components/site-manager/site-info-panel/index.tsx,packages/playground/website/src/components/site-manager/site-info-panel/style.module.css.

cc @apermo who pointed the problem out to me.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Fixes the site manager tab layout so the tab bar stays visible when the File browser tab mounts a full-height editor.

Changes:

• Introduces a flex-bounded wrapper around the tab panel to constrain layout sizing.
• Updates tab panel CSS to allow it to shrink within a flex container via flex and min-height: 0.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/playground/website/src/components/site-manager/site-info-panel/style.module.css	Adds .tabPanelWrapper and adjusts .tabs to allow proper flex shrinking and prevent tab bar from being pushed out of view.
packages/playground/website/src/components/site-manager/site-info-panel/index.tsx	Switches the tab panel container from inline flexGrow styling to the new CSS module wrapper class.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

packages/playground/website/src/components/site-manager/site-info-panel/index.tsx:1

• css.siteInfoHeader forces display: grid !important, but this component is still rendered as a WordPress <Flex> with direction/gap/justify/align props that likely apply flex-centric styles (often inline). Those styles can override/conflict with the intended grid alignment (e.g., align=\"center\" vs CSS align-items: start) and produce inconsistent layout across breakpoints/states. Prefer rendering a plain div here (or removing conflicting Flex props) so the grid layout is controlled solely by CSS.

import {

[zaerl]

I think it's a good place to also fix the same problem we get on the editor

The bottom text is also quite long in my opinion. "Run and reset site" is enough.

[akirk]

Good point, thanks! For a blueprint we can actually remove the files sidebar, I think.