feat(core,vue): Improve anchor position behavior - #2
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (17)
📝 WalkthroughWalkthroughChangesAnchor positioning now prefers the top side, flips or selects the roomier side when needed, and constrains panel dimensions to the visible viewport. Core, custom-element, Vue, and demo implementations respond to viewport and element changes through scheduled updates. Tests, styles, documentation, exports, and bundle limits were updated. Anchor positioning
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Context7Widget
participant VisualViewport
participant ResizeObserver
participant AnchorPanel
User->>Context7Widget: open anchored widget
Context7Widget->>VisualViewport: read dimensions and offsets
Context7Widget->>ResizeObserver: observe anchor and panel
Context7Widget->>AnchorPanel: apply position, maximum dimensions, and translation
VisualViewport->>Context7Widget: resize or scroll event
ResizeObserver->>Context7Widget: geometry change
Context7Widget->>AnchorPanel: reposition on next render frame
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/widget-element.ts`:
- Around line 705-707: Replace the nullish coalescing operators with
positive-value fallback checks in the viewportWidth and viewportHeight chains of
packages/core/src/widget-element.ts (lines 705-707) and
packages/vue/src/components/Context7Widget.vue (lines 736-737), allowing zero
window dimensions to fall through to document dimensions and panel dimensions.
Regenerate packages/demo/public/widget.js at line 131 from the corrected
sources; do not edit the minified bundle manually.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 326586fa-7092-486e-97e3-afe6642adb7c
📒 Files selected for processing (10)
common/styles/_widget.scssdemo/public/widget.jsdocs/INTEGRATION.mdpackages/core/src/dom.tspackages/core/src/widget-element.tspackages/core/tests/unit/layout.test.tspackages/core/tests/unit/widget-element.test.tspackages/vue/src/components/Context7Widget.vuepackages/vue/tests/unit/context7-widget.test.tsscripts/check-bundle-size.mts
There was a problem hiding this comment.
🔵 Human review recommended
The changes alter cross-browser UI layout behavior across core, Vue, styles, and bundled artifacts and should be manually validated in real browsers/devices.
Pull request overview
This PR improves the widget’s position="anchor" behavior across the core custom element and the Vue wrapper by making placement smarter (prefer above, flip below, pick roomier side), constraining size to the visual viewport (including mobile chrome/keyboard effects), and re-positioning reliably as viewport/anchor/panel dimensions change.
Changes:
- Update the anchor layout resolver to account for
visualViewportoffsets and returnmaxHeight/maxWidth+ placement metadata. - Add throttled re-positioning for anchored panels using
requestAnimationFrame,visualViewportevents, andResizeObserver(core + Vue). - Update styling/tests/docs and refresh demo/runtime artifacts, including a bundle size budget adjustment.
File summaries
| File | Description |
|---|---|
| scripts/check-bundle-size.mts | Updates the gzip budget for the core runtime consumer to reflect the new logic. |
| packages/vue/tests/unit/context7-widget.test.ts | Adds unit coverage for visual viewport + ResizeObserver-driven anchor updates in Vue. |
| packages/vue/src/components/Context7Widget.vue | Implements throttled anchor re-positioning and visual viewport / ResizeObserver tracking. |
| packages/core/tests/unit/widget-element.test.ts | Updates anchor tests for async scheduling and adds visual viewport / ResizeObserver coverage. |
| packages/core/tests/unit/layout.test.ts | Expands layout unit tests for new placement/max sizing and visual viewport offsets. |
| packages/core/src/widget-element.ts | Adds throttled repositioning, visual viewport listeners, and ResizeObserver support for anchored widgets. |
| packages/core/src/dom.ts | Enhances resolveContext7AnchorLayout to produce max constraints and support visual viewport offsets. |
| docs/INTEGRATION.md | Documents the updated anchor placement and visual viewport-constrained behavior. |
| demo/public/widget.js | Refreshes the demo bundle to include new anchor behavior and CSS variables. |
| common/styles/_widget.scss | Uses new CSS variables to constrain anchor max-size and match animation direction to placement. |
Review details
Files not reviewed (1)
- demo/public/widget.js: Generated file
- Files reviewed: 9/10 changed files
- Comments generated: 0
- Review effort level: Lite
We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.
There was a problem hiding this comment.
🟡 Changes recommended
The new anchor transition CSS uses a --c7-anchor-translate-y fallback that conflicts with the default preferred placement, causing incorrect initial open animation direction.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.
Review details
Files not reviewed (1)
- demo/public/widget.js: Generated file
Suppressed comments (2)
common/styles/_widget.scss:1030
- Same issue as the desktop anchor panel styles: the mobile anchor panel uses a
-8pxfallback for--c7-anchor-translate-y, which conflicts with the default preferredtopplacement (should start from+8pxunless overridden by JS).
transform: translateY(var(--c7-anchor-translate-y, -8px)) scale(0.98);
common/styles/_widget.scss:575
- The fallback for
--c7-anchor-translate-yis-8px, but the anchor layout now prefers opening above the trigger (placementtop), where the code sets--c7-anchor-translate-yto8px. On first open (before JS sets the variable), this causes the entry transition to animate from the wrong direction.
This issue also appears on line 1030 of the same file.
transform: translateY(var(--c7-anchor-translate-y, -8px)) scale(0.98);
- Files reviewed: 9/10 changed files
- Comments generated: 0 new
- Review effort level: Lite
We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
|
Description
What does this PR do?
Why is this change needed?
Type of Change
Testing
pnpm test:unitpnpm test:e2eScreenshots (if applicable)
Checklist
Maintainers only (
write/maintain/adminaccess): open the workflow, clickRun workflow, and setpr_numberto this PR number to post/update a coverage comment on this PRSummary by CodeRabbit
New Features
Bug Fixes