[DropdownMenu Content] Setting full-width / responsive styles

[binhxn]

Hello! 👋 ,

I have a use case where I need to make the DropdownMenu.Content full-width in mobile viewport. I was wondering how to go about that? I'm able to set fixed widths (e.g. width: '200px'), but setting full-width (e.g. width: '100%') doesn't seem to be working.

I also noticed the content wrapper seems to be controlling the layout and position styles (data-radix-popper-content-wrapper). Is that something we can (or should) access? Would love to hear your thoughts!

edit: I was able to make the width responsive by styling the data-radix-popper-content-wrapper attribute. That felt hacky, but am curious to know if that was the right approach.

[benoitgrelard]

At the moment, the component isn't really designed for that so what you are doing is probably the best way to "hack" around that.

[binhxn]

Sounds good, thank you for quick response!