feat(packages): add flip functionality to popovers/tooltips/menus - #1857
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📦 Bundle Size Report🎨 @videojs/html
Presets (7)
Media (10)
Players (5)
Skins (30)
UI Components (39)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (9)
Skins (27)
UI Components (33)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (68)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (11)
📦 @videojs/spf — no changesEntries (4)
ℹ️ How to interpretJS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.
Run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
sampotts
force-pushed
the
feat/popover-flip
branch
from
July 22, 2026 15:21
daf35fb to
c76f4a0
Compare
sampotts
force-pushed
the
feat/popover-flip
branch
from
July 22, 2026 19:47
c76f4a0 to
7b0a104
Compare
sampotts
force-pushed
the
feat/popover-flip
branch
from
July 22, 2026 20:01
7b0a104 to
4d65ef0
Compare
sampotts
force-pushed
the
feat/popover-flip
branch
from
July 22, 2026 21:12
4d65ef0 to
ca9b34a
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit ca9b34a. Configure here.
sampotts
force-pushed
the
feat/popover-flip
branch
from
July 22, 2026 21:25
ca9b34a to
2495b71
Compare
mihar-22
approved these changes
Jul 28, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds logic to flip the
sidebased on the boundary element. Thedata-sideattribute now reflects the resolved side rather than the preferred side.This paves the way for the responsive skins PR where we've added controls with tooltips at the top of the player on small displays resulting in the tooltips overflowing the container.
Note
Medium Risk
Changes shared positioning for menus, popovers, and tooltips across HTML and React; behavior is well covered by tests but affects visible placement at viewport edges.
Overview
Adds collision-aware side flipping for root menus, popovers, and tooltips via new
getPositionedSidein@videojs/utils/dom. Thesideprop stays the preferred placement; when space on that side is insufficient, the popup uses the opposite side if it has more room, anddata-sideis set to that resolved side (not the prop) for styling.Positioning engine tweaks support stable flip/measure: manual
top/leftplacement uses viewportbottom/rightfor those sides so side-axis size does not shift the anchor;getPopupPositionRecttakessideand uses scroll width/height on the side axis for clipped content; cross-axis--media-*-available-*vars use full boundary span instead of align-trimmed width.React adds
usePositionedStateso open UI exposes the measured side while closed renders reset to the preferred side. HTML and React popup components run the same measure → flip → style flow and re-measure on the JS fallback path when needed.Docs note that
data-sidemay differ fromsideafter collision handling.Reviewed by Cursor Bugbot for commit 2495b71. Bugbot is set up for automated code reviews on this repo. Configure here.