Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[bug]: v4 HoverCard is broken due to container-type behavior #6875

Open
2 tasks done
guscost opened this issue Mar 6, 2025 · 2 comments · May be fixed by #6877
Open
2 tasks done

[bug]: v4 HoverCard is broken due to container-type behavior #6875

guscost opened this issue Mar 6, 2025 · 2 comments · May be fixed by #6877
Labels
bug Something isn't working

Comments

@guscost
Copy link

guscost commented Mar 6, 2025 •
edited
Loading

Description

The new Tailwind v4 @container class adds a container-type: inline-size rule for container queries, that breaks Radix HoverCard position calculation in Chrome 129+, due to this browser "fix":

floating-ui/floating-ui#3067 (comment)

Affected component/components

HoverCard, possibly others

How to reproduce

Hover over the HoverCard demo at v4.shadcn.com. Remove the @container class or add contain-layout on the demo container div, and try again to see the correct behavior.

System Info

Chrome 129+

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@guscost guscost added the bug Something isn't working label Mar 6, 2025
@Jacksonmills
Copy link
Contributor

So if I am understanding this correctly we always will want the class contain-layout on the HoverCard component, I can open a PR to add this to the v4 HoverCard

@Jacksonmills
Copy link
Contributor

In testing I can only reproduce this bug on the HoverCard

Jacksonmills added a commit to Jacksonmills/ui that referenced this issue Mar 6, 2025
@Jacksonmills
fix(hover-card): 6875 - Wrap HoverCard with contain-layout div to fix…
c4fc345 
… container-type behavior

Wraps the HoverCard component with a div having the class "contain-layout" to address the container-type behavior issue causing it to break in v4.

Fixes shadcn-ui#6875
@Jacksonmills Jacksonmills linked a pull request Mar 6, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
2 participants
@guscost @Jacksonmills