Segment condition value text input is too small

[rolodato]

Is your feature request related to a problem? Please describe.

Per https://docs.flagsmith.com/basic-features/segments?operators=in#limits, the maximum size of a segment condition is 1000 bytes. The current segment condition editor has a textbox that is way too small to handle values that size. For example, this is what it looks like trying to view or edit a full 1000-byte value:

long-segment-condition.mov

This is even annoying when using much smaller values such as UUIDs, which are just 36 bytes long:

uuid-condition.mov

Another annoyance is that it's not possible to tell at a glance that a condition value is actually longer than the input field shows. For example, the top condition here is just abcdefghijklmn and the second one is 1000 bytes long, but they look identical (being able to reproduce this or not depends on the exact browser/font/OS/etc):

It's also not easy while editing a value to tell that it begins or ends with whitespace. For example, the top value here is a and the bottom one is a :

While we're at it, we might want to show trait names and values in a fixed-width font to avoid ambiguous characters, especially since both trait names and values will most often be used from applications and need to be precise. Example, this condition says Il and is hard to read:

The only real workarounds are to use the "Show JSON references" option and view the full segment conditions there, or to copy/paste the values somewhere else. Neither is a good option.

Describe the solution you'd like.

I don't have a concrete UX in mind, but here are some ways this could be improved:

1. Automatically expand the input fields for long values, though this might get unwieldy at the extremes
2. Show the full condition value on hover, similar to alt values for img elements
3. Provide a way to manually toggle the input fields for long values to expand or collapse
4. Give a clear hint that a value is longer than what the input field shows (ellipsis or similar) if we do want to collapse the fields

Describe alternatives you've considered

The closest good UX I know for a similar use case is Vercel's environment variable editor. I really like how they highlight all whitespace, especially leading and trailing, during editing:

They also show the full value on hover, with a click-to-copy option:

The creating and editing fields also auto expand for long values:

Additional context

You can generate 1000-byte strings with this command:

xxd -p < /dev/urandom | tr -d '\n' | head -c 1000