From 26a1156959accac357e35c0419617edeeb214159 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 14 May 2025 13:56:05 +0200
Subject: [PATCH] 1-3744: Set a min-width for context field selector +
 underline when not focused (#9991)

When you have very short names (1--2 characters) the field itself can be
hard to see, so we'll set a min width.

Before (with hover):
<img width="455" alt="image"
src="https://github.com/user-attachments/assets/a9590d3d-88a2-4814-9581-33b8378f4524"
/>

After (without hover):
<img width="523" alt="image"
src="https://github.com/user-attachments/assets/1e7b6028-e142-442a-9b53-55425d2d6c59"
/>
---
 .../FeatureStrategyConstraints/EditableConstraint.tsx        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index 9f4d455d36..937dc0a034 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -75,6 +75,7 @@ const LegalValuesContainer = styled('div')(({ theme }) => ({
 const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
     fieldset: { border: 'none', borderRadius: 0 },
     maxWidth: '25ch',
+    minWidth: '7ch',
     ':focus-within .MuiSelect-select': {
         background: 'none',
     },
@@ -84,9 +85,7 @@ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
         margin: 0,
     },
     '&::before': {
-        border: 'none',
-        // make it transparent so that it fades in
-        borderColor: `${theme.palette.primary.main}00`,
+        borderColor: theme.palette.divider,
     },
     '&&:hover::before': {
         borderColor: theme.palette.primary.main,