fix(core): clamp popovers to viewport

[webfansplz]

Close #459

[pkg-pr-new]

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@461

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@461

@vitejs/devtools-oxc

npm i https://pkg.pr.new/@vitejs/devtools-oxc@461

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@461

@vitejs/devtools-vite

npm i https://pkg.pr.new/@vitejs/devtools-vite@461

@vitejs/devtools-vitest

npm i https://pkg.pr.new/@vitejs/devtools-vitest@461

commit: 3fba67c

[Copilot]

Pull request overview

Fixes dock/tooltip popovers overflowing the viewport in embedded floating/edge dock modes by introducing viewport-aware positioning with panel-size measurement and adding targeted regression coverage.

Changes:

• Refactors FloatingPopover to delegate positioning to a new resolveFloatingPosition() helper and measure panel dimensions for clamping.
• Adds floating-position.ts resolver to handle alignment guessing, side flipping, and cross-axis clamping.
• Adds Storybook coverage (corner anchors) and Vitest unit tests for the new positioning logic.

Reviewed changes

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

File	Description
packages/core/src/client/webcomponents/components/floating/FloatingPopover.ts	Measures popover size and uses shared resolver to compute styles, enabling clamped positioning.
packages/core/src/client/webcomponents/components/floating/FloatingPopover.stories.ts	Adds a corner-anchor harness to visually validate viewport clamping.
packages/core/src/client/webcomponents/components/floating/floating-position.ts	Introduces centralized positioning logic (guess/flip/clamp).
packages/core/src/client/webcomponents/components/floating/tests/floating-position.test.ts	Adds unit tests covering alignment selection, flipping, clamping, and first-paint behavior.

Comments suppressed due to low confidence (1)

packages/core/src/client/webcomponents/components/floating/floating-position.ts:90

• For left/right placements, the main axis position isn’t clamped even when panelWidth is known. This means wide popovers can still overflow past the viewport edge (especially when placement is explicit and flipping is disabled). Clamping the computed left/right keeps the popover within VIEWPORT_MARGIN.

  else {
    if (align === 'right')
      style.left = `${anchorRight + gap}px`
    else
      style.right = `${vw - rect.left + gap}px`

---

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