[Bug Fix] HoverCard: let the card escape a clipping ancestor - #530
Open
leonardo-vsilva wants to merge 2 commits into
Open
[Bug Fix] HoverCard: let the card escape a clipping ancestor#530leonardo-vsilva wants to merge 2 commits into
leonardo-vsilva wants to merge 2 commits into
Conversation
HoverCardContent is `position: absolute`, so an ancestor with
`overflow: hidden` — a scroll area, a table cell, a truncating
container — clips the card instead of letting it overflow.
Give HoverCard the same escape hatch DropdownMenu already has:
`option: {strategy: "fixed"}` switches the root to `is-fixed`, the
content picks up `fixed` through the group variant, and the controller
passes the strategy on to computePosition. The default stays
`absolute`, so existing usage is untouched.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
All reported issues were addressed across 7 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
The class ternary keyed off "absolute", so every other value — a typo like "absolut" included — rendered `is-fixed`, while Floating UI keys off "fixed" and computes anything else as absolute. The card then painted `position: fixed` with coordinates resolved against its offset parent, drifting from the trigger on scroll. Key the class off "fixed" instead, so both sides fall back to absolute on the same input. DropdownMenu carried the same ternary; fix both. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
1 participant
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.
Related issue
No existing issue — happy to open one if you'd prefer to track it there.
Description
HoverCardContentisposition: absolute, so a positioned ancestor that hides its overflow — a scroll area, a table cell, a truncating container — clips the card instead of letting it overflow.DropdownMenualready solves this: the root switches betweenis-absoluteandis-fixedfromoptions[:strategy], the content picks up itspositionthrough a group variant, and the controller passes the strategy on tocomputePosition. This givesHoverCardthe same escape hatch, following that implementation exactly:HoverCardroot gainsgroup/hover-cardplusis-absolute/is-fixed;HoverCardContenttrades its hardcodedabsoluteforgroup-[.is-absolute]/hover-card:absolute group-[.is-fixed]/hover-card:fixed;strategy: this.optionsValue.strategy || "absolute"tocomputePosition.The default stays
absolute, so existing usage renders and positions exactly as before.Docs get an "Escaping a clipping ancestor" example, and
mcp/data/registry.jsonis rebuilt (cd mcp && bundle exec rake mcp:build) somcp-registry-checkstays green.Testing instructions
cd gem && bundle exec rake— 292 runs, 0 failures;standardrbclean across 402 files.cd docs && bin/dev, open/docs/hover_cardand scroll to Escaping a clipping ancestor. Hover@joeldrapper: the card renders in full, overflowing therelative … overflow-hiddencontainer around it.option: {strategy: "fixed"}) and hover again: the card is clipped by the container — the behaviour onmaintoday.Summary by cubic
Fixes HoverCardContent being clipped by ancestors with
overflow: hidden. HoverCard now supportsoption: {strategy: "fixed"}to position the card against the viewport instead; the default remainsabsolute, so existing usage is unchanged.is-absoluteandis-fixed, the content picks up its position through a group variant, and the controller passes the strategy tocomputePosition.mcp/data/registry.json.absolutelike Floating UI, preventing afixedcard from drifting on scroll.Written for commit 28ac6ec. Summary will update on new commits.