[Website] Align mobile Dock pane titles, toolbars, and forms

[adamziel]

Dock panes now use consistent header spacing from desktop to mobile. Desktop titles have 24px top padding down to 1025px. At 1024px and narrower, the existing full-screen mobile header keeps its 20px top padding, 24px left inset, and centered 44×44 X.

Before this PR, each pane solved its mobile header separately. The X sat at different heights. Blueprint and Files hid the shared heading and let the X float over their controls. Your Playgrounds had three left edges. Site Settings crowded a checkbox against its select. Files truncated the filename before the directory. Store permanently put Cancel and Save together with no gap.

At 390px and wider, Blueprint keeps Blueprint, Help, Browse files, Export, and X on one line. At 388px and narrower, Browse files and Export move together to a second line. Files keeps the current path beside the title, preserves /wp-config.php when space runs out, and aligns Browse files and Save with the title gutter. Site Settings stacks labels above full-width selects and separates dependent checkboxes. Your Playgrounds uses one left edge. Cancel and Save use the same 16px action gap as other modal footers.

Desktop header spacing at 1440×900

Pane	Before	After
New Playground
Your Playgrounds
Blueprint
Site Settings
Database
Files
Logs
Export
Store permanently

Mobile before and after at 390×844

Pane	Before	After
New Playground
Your Playgrounds
Blueprint
Site Settings
Database
Files
Logs
Export
Store permanently

Testing

On desktop, open each Dock pane and confirm its title starts 24px from the top. Resize through 1025px and 1024px and confirm the mobile header changes only at the existing breakpoint.

At 390×844, open every pane and confirm the title, subtitle, and X match the after screenshots without overlaps or horizontal scrolling. At 320px, confirm Blueprint wraps only its two labelled actions, Files keeps the filename visible, and Cancel and Save remain separated.

[Copilot]

Pull request overview

Note

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

Aligns mobile Dock pane titles and close controls by moving the close button into a shared title row (including for panes that omit the shared header on desktop), and adjusts the Files editor toolbar layout to use available width without overlap.

Changes:

• Add a mobile-only “editor header” title row for panes that don’t render the shared header, and place the close button within the title row.
• Update mobile Dock pane layout and close button sizing/positioning to a consistent 44×44 target.
• Convert the Files editor mobile header layout to a 3-column grid so the path can ellipsize between actions.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
packages/playground/website/src/components/dock/style.module.css	Adds mobile title-row/editor-header styling and updates close button layout/sizing.
packages/playground/website/src/components/dock/dock-pane.tsx	Refactors close button rendering and injects it into the title row (or mobile editor header when shared header is omitted).
packages/playground/components/src/PlaygroundFileEditor/playground-file-editor.module.css	Switches Files editor header on dock presentation to grid layout and removes prior wrap/ordering hacks.

---

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