Dropdown button clipped in small containers?

[mkh]

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?

[dcartlidge]

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

Make the dropdown/navigation menu width expand to fit contents

Trying to use a dropdown menu as an action menu alongside a text field. Works fine, expect that the width of the menu, when displayed, is only as wide as the button element that triggered it. Seems to be the same for navigation elements too. Make it small, turns into a hamburger, resulting menu is cropped to the same width as the icon - all the text is lost. An option to choose if the menu should crop to the size of the component or the contents would be great. [cropped_menu]

[MicExpert]

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

[victoria]

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

[victoria]

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

[mkh]

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

[dcartlidge]

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

[victoria]

@mkh - asking now!

@dcartlidge Helpful - thank you. Passed that along

[victoria]

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

I filed it and linked it to this thread internally.