fix: version action drop down poistioning

[shahzadaziz]

Summary

The versions dropdown menu was appearing detached from its trigger button after a react-tether upgrade, because the absolutely-positioned toggle button gave the tether target wrapper zero dimensions, preventing correct position calculation.

Key Changes

• -Root Cause: Toggle button had position: absolute, causing the .bdl-DropdownMenu-target wrapper to have 0 dimensions → tether couldn't calculate position
• • Fix: Added targetWrapperClassName="bcs-VersionsItemActions-targetWrapper" to DropdownMenu and positioned the wrapper absolutely instead of the button
• • CSS Changes (VersionsItem.scss):
• .bcs-VersionsItemActions-targetWrapper → position: absolute; top/right
• • .bcs-VersionsItemActions-toggle → removed position: absolute
• Additional (VersionsItemActions.js):
• • Added constrainToWindowWithPin prop for better scroll behavior
• Z-index (VersionsItemActions.scss):
• • Used $overlay-z-index variable instead of hardcoded value

Before

After

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Improved dropdown menu positioning and visibility in the version history panel to ensure better alignment near window edges and proper layering with other interface elements.

[coderabbitai]

Walkthrough

CSS class naming and positioning logic refactored in the Versions sidebar actions component. The action wrapper layout is renamed from toggle to targetWrapper, modernized positioning rules are removed, and dropdown positioning props are introduced alongside z-index styling adjustments.

Changes

Cohort / File(s)	Summary
Versions Item CSS Restructuring src/elements/content-sidebar/versions/VersionsItem.scss	Renames action wrapper class from .bcs-VersionsItemActions-toggle to .bcs-VersionsItemActions-targetWrapper for positioning; removes .bcs-VersionsItemActions-toggle--modernized block while preserving focus styling on the toggle selector.
Versions Item Actions Enhancement src/elements/content-sidebar/versions/VersionsItemActions.js	Adds constrainToWindowWithPin and targetWrapperClassName="bcs-VersionsItemActions-targetWrapper" props to DropdownMenu for improved layout and positioning behavior.
Versions Item Actions Styling src/elements/content-sidebar/versions/VersionsItemActions.scss	Introduces z-index rule for nested .dropdown-menu-element selector to increase stacking context using $overlay-z-index variable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat(preview-optimizations): modernize Versions sidebar #4381: Modifies the same Versions sidebar actions component with related CSS and layout changes to toggle and action wrapper classes.

Suggested labels

ready-to-merge

Suggested reviewers

• jfox-box
• tjuanitas
• myu-box
• tjiang-box

Poem

🐰 A wrapper renamed, positions refined,
The toggle now focuses, z-indices aligned,
Drop-downs constrained with care and grace,
Modernized rules make room and space! 🎯

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing the positioning of the version action dropdown menu after a react-tether upgrade.
Description check	✅ Passed	The description provides clear context, root cause analysis, key changes across files, and before/after screenshots demonstrating the fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-version-tether

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[ahorowitz123]

Do we need to update any tests?

[shahzadaziz]

Do we need to update any tests?
We do not have visual regressions for these. No other updates were required.

[mergify]

Merge Queue Status

✅ The pull request has been merged at c3ff0e6

This pull request spent 7 seconds in the queue, with no time running CI.
The checks were run in-place.

Required conditions to merge

• #approved-reviews-by >= 1 [🛡 GitHub branch protection]
  • fix: version action drop down poistioning #4431
• #changes-requested-reviews-by = 0 [🛡 GitHub branch protection]
  • fix: version action drop down poistioning #4431
• #review-threads-unresolved = 0 [🛡 GitHub branch protection]
  • fix: version action drop down poistioning #4431
• branch-protection-review-decision = APPROVED [🛡 GitHub branch protection]
  • fix: version action drop down poistioning #4431
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request