Fix getAnchoredPosition to account for scroll position when positioning elements

[Copilot]

Fixes #5358 where getAnchoredPosition fails when scroll position causes elements to render out of view.

Problem

The getAnchoredPosition function looks at available space to determine which side to render a floating element relative to its anchor. However, it doesn't consider scroll position, making it possible for elements to be positioned outside the visible viewport when the page is scrolled.

For example, if a user scrolls down on a long page and opens a dropdown menu, the positioning algorithm might choose to render the menu below the anchor because there's space in the container, but this puts the menu below the visible scroll area where users can't see it.

Solution

This PR adds a new feature flag enableAnchoredPositionViewportFix to the PositionSettings interface. When enabled, the positioning algorithm accounts for the current scroll position and viewport size to ensure floating elements remain visible.

Changes Made

1. Added feature flag: enableAnchoredPositionViewportFix?: boolean to PositionSettings interface
2. Enhanced viewport calculation: When the flag is enabled, uses window.pageYOffset and window.innerHeight to calculate the actual visible viewport area instead of just the container bounds
3. Backward compatibility: The fix is opt-in and doesn't affect existing behavior when disabled

Example Usage

const position = getAnchoredPosition(floatingElement, anchorElement, {
  side: 'outside-bottom',
  align: 'start',
  enableAnchoredPositionViewportFix: true // Enable the scroll-aware positioning
});

Testing

Added comprehensive tests that demonstrate:

• The original bug behavior when the fix is disabled
• Correct positioning when the fix keeps elements in the visible viewport
• Anchor side flipping when necessary to maintain visibility

All existing tests continue to pass, ensuring no regressions.

References

• Fixes https://github.com/github/primer/issues/5358
• Related to SelectPanel and ActionMenu positioning issues mentioned in the original issue

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2bae5b3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR