Variable width for menu items

[tonge495]

Hi Paste team,

We have a scenario where we would like to increase the width of the default menu component to accommodate for situations where there may be more text on each individual menu item. See example below:

Is allowing for variable widths for the menu items something that you can include as a betterment?

[SiTaggart]

Hi @tonge495

I think the problem is going to be, "how wide is wide enough?" if you are displaying user generated content as the menu item. Some of those items may be extremely long and never fit on the screen, so you will need to trim or truncate them at some point.

The question is, when, and is now "long enough" for a user to identify the item they need?

To start with, I'd recommend utilizing truncation on the menu item with the current width of the menu item and testing with users to see if it's enough context to understand what they are selecting.

[serifluous]

If you're worried about the text being cut off, by default, the overflow text will wrap lines.

After we added max width to the Figma component, we haven't got it to work perfectly yet to mimic the coded component behavior. You'll have to set the text layer to "Fill" width yourself for now.

[tonge495]

Spoke with the developer on this. We can leave it as is for now and see how long the question string is as users enter the info. Thanks both!