Dropdown button clipped in small containers?

Is there a way to prevent a Dropdown Button component from being clipped in small containers? See screenshot example. I'm trying to create a contextual menu using a ••• button, which is a pretty common UI element these days, but the dropdown menu gets clipped to the size of the container it's in, making it useless here. Is there a better way to do this? Or is this a bug with the component?

Screenshot 2023-10-30 at 3.08.49 PM

Long standing issue I'm afraid :frowning: Victoria had some ingenious workaround suggestions though:

In the Appearance section, the 'Min list width' option is available, but it doesn't appear to function properly. bug ? Known issue

Definitely a bug :pensive: I bumped this in our queue, so we'll see if we can push a fix soon!

@mkh - good news! We pushed a fix for this :slight_smile: Are you still seeing any clipping?

2 Likes

Great news!! What version? We're on self-hosted so we'll need to do an upgrade here soon.

Seems to be an issue if you align the button...

image
image

@mkh - asking now!

@dcartlidge Helpful - thank you. Passed that along

2 Likes

Good news bad news—seems like the aligning causing clipping is actually a different bug :sweat_smile:

I filed it and linked it to this thread internally.

2 Likes

I still can't replicate the solution by @dcartlidge (changing the alignment of the dropdown to default). I tried all alightments.

Is there something else I can check?

image