Segment override value input overflows layout with long text (multivariate flags)

[talissoncosta]

How are you running Flagsmith

SaaS at flagsmith.com

Describe the bug

In the Segment Overrides tab, when a multivariate feature flag has a long value, the "Segment Control Value" input overflows horizontally, breaking the modal layout. The text extends beyond the modal boundary instead of being constrained within it.

This only affects multivariate flags. Non-multivariate flags use a different container that correctly has overflow-hidden.

Root cause: In SegmentOverrides.js line 281, the multivariate value container uses flex-1 flex-column but is missing overflow-hidden:

// Multivariate path (line 281) — MISSING overflow-hidden
<div className='flex-1 flex-column'>
  <label>Segment Control Value - {controlPercent}%</label>
  <ValueEditor ... />
</div>

// Non-multivariate path (line 259) — CORRECT
<div className='flex-fill overflow-hidden'>
  <label>Value</label>
  <ValueEditor ... />
</div>

Steps To Reproduce

1. Create or edit a multivariate feature flag
2. Go to the Segment Overrides tab
3. Add a segment override
4. Set the segment override value to a long string (e.g. "Test with a long message. Test with a long message. Test with a long message.")
5. Observe the value input overflows the modal boundary

Expected behavior

The value input should be constrained within the modal width, matching the behaviour of non-multivariate flags.

Suggested fix

Add overflow-hidden to the container at line 281 in SegmentOverrides.js:

<div className='flex-1 flex-column overflow-hidden'>