Skip to content

[Website] Define Dock pane and notice positioning - #4056

Merged
adamziel merged 1 commit into
trunkfrom
dock-positioning-geometry
Jul 15, 2026
Merged

[Website] Define Dock pane and notice positioning#4056
adamziel merged 1 commit into
trunkfrom
dock-positioning-geometry

Conversation

@adamziel

Copy link
Copy Markdown
Collaborator

This PR adds the calculations that keep bottom Dock panes and operation notices inside the viewport.

The Dock in #4009 currently performs these calculations inside its main component. That mixes rendering and pointer state with desktop, mobile, narrow-viewport, and open-pane geometry.

The new module calculates pane height and position, clamps panes at both viewport edges, places notices above an open pane, and keeps notices on-screen when a pane consumes most of the viewport. Focused tests lock those boundaries down.

Nothing imports the module yet, so this PR does not change the website UI. #4009 will use it when the rest of the Dock stack lands for #3965.

Tested with:

  • npm exec nx test playground-website -- --testFile=dock-positioning.spec.ts --output-style=static
  • npm exec nx typecheck playground-website -- --output-style=static
  • npm exec nx lint playground-website -- --output-style=static

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

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

Introduces a new Dock positioning utility module (plus tests) that computes pane and operation-toast geometry to keep them within the viewport, intended for later integration into the Dock stack (#4009 / #3965) without changing current UI behavior.

Changes:

  • Added dock-positioning.ts with functions/constants to compute pane styles, toast styles, and clamped pane centers.
  • Added focused unit tests covering core pane/toast positioning and center clamping behavior.

Reviewed changes

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

File Description
packages/playground/website/src/components/dock/dock-positioning.ts New positioning helpers that clamp pane/toast placement within viewport constraints.
packages/playground/website/src/components/dock/dock-positioning.spec.ts New unit tests validating key geometry/clamping boundaries.

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

Comment thread packages/playground/website/src/components/dock/dock-positioning.ts Outdated
Comment thread packages/playground/website/src/components/dock/dock-positioning.ts
@adamziel
adamziel force-pushed the dock-positioning-geometry branch from 9cbf297 to bc03873 Compare July 15, 2026 00:06
@adamziel
adamziel merged commit 9465ba5 into trunk Jul 15, 2026
52 checks passed
@adamziel
adamziel deleted the dock-positioning-geometry branch July 15, 2026 00:08
adamziel added a commit that referenced this pull request Jul 15, 2026
This PR moves the five Site Manager tool bodies out of `SiteInfoPanel`
without changing the current Site Manager UI.

`SiteInfoPanel` currently owns two separate jobs: the Playground header
and actions, and the Settings, File browser, Blueprint, Database, and
Logs tab contents. The bottom Dock in #4009 needs those tool contents
without the old header.

`SiteToolPanels` now owns the existing tab contents. `SiteInfoPanel`
still owns the same `TabPanel`, passes its selected tab into the new
component, and renders the same tools with the same loading, offline,
temporary-site, and read-only states. A focused test verifies that
changing tabs hides inactive tools without unmounting them.

This is the second PR in the #4009 stack for #3965. It is based on
#4056.

Tested with:

- `npm exec nx test playground-website -- --output-style=static`
- `npm exec nx typecheck playground-website -- --output-style=static`
- `npm exec nx lint playground-website -- --output-style=static`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment