From 0e1ab236c96dc6d60a0400a838d9fdcd639f071b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 30 Apr 2025 13:57:57 +0200
Subject: [PATCH] Fix/constraint value wrapping (#9873)

Changes how constraint values are treated and wrapped.

Previously, they would have their own column and fill it up:

![image](https://github.com/user-attachments/assets/3d13fa75-2b53-4393-8bb2-8677741016e3)

Then we changed it to always being on the next line below certain
widths:

![image](https://github.com/user-attachments/assets/e2fea1e2-3ab8-4000-a727-831802c583c4)

But that would also cause it to break even if there was no need for it.
This iteration instead uses display `contents` on the value lists to let
them be handled by the flex flow of the containing element. This allows
them to only wrap when necessary.

<img width="995" alt="image"
src="https://github.com/user-attachments/assets/d61f6f49-b1ef-49ec-91a4-df868cedc678"
/>

Of course, if they don't need to wrap, they don't:
<img width="1030" alt="image"
src="https://github.com/user-attachments/assets/84c27997-7cb2-4e1b-8977-d43a46f7de6e"
/>


This loom video shows how it folds in the most complex scenario, with
all elements being visible and within bounds down to about 300px:
https://www.loom.com/share/4f29cdb105d54edeb70edd54dfaca9f9
---
 .../AddSingleValueWidget.tsx                      |  1 +
 .../EditableConstraint.tsx                        | 15 +++------------
 .../FeatureStrategyConstraints/ValueList.tsx      |  9 +++------
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddSingleValueWidget.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddSingleValueWidget.tsx
index 5cc82a35fe..a6b1221bf2 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddSingleValueWidget.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddSingleValueWidget.tsx
@@ -8,6 +8,7 @@ const StyledChip = styled(ValueChip, {
     shouldForwardProp: (prop) => prop !== 'hasValue',
 })<{ hasValue: boolean }>(({ theme, hasValue }) => ({
     color: hasValue ? 'inherit' : theme.palette.primary.main,
+    width: 'max-content',
     '.MuiChip-icon': {
         transform: 'translateX(50%)',
         fill: theme.palette.primary.main,
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index 83d0783cec..d48ba424cc 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -36,11 +36,8 @@ const Container = styled('article')(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     borderRadius: theme.shape.borderRadiusLarge,
     border: `1px solid ${theme.palette.divider}`,
-    containerType: 'inline-size',
 }));
 
-const onNarrowContainer = '@container (max-width: 700px)';
-
 const TopRow = styled('div')(({ theme }) => ({
     '--gap': theme.spacing(1),
     padding: 'var(--padding)',
@@ -53,27 +50,21 @@ const TopRow = styled('div')(({ theme }) => ({
 
 const ConstraintOptions = styled('div')(({ theme }) => ({
     display: 'flex',
-    flexFlow: 'row nowrap',
+    flexFlow: 'row wrap',
     gap: 'var(--gap)',
     alignSelf: 'flex-start',
-    [onNarrowContainer]: {
-        flexFlow: 'row wrap',
-    },
 }));
 
 const OperatorOptions = styled(ConstraintOptions)(({ theme }) => ({
-    flexFlow: 'row nowrap',
+    flexFlow: 'row wrap',
 }));
 
 const ConstraintDetails = styled('div')(({ theme }) => ({
     display: 'flex',
     gap: 'var(--gap)',
-    flexFlow: 'row nowrap',
+    flexFlow: 'row wrap',
     width: '100%',
     height: 'min-content',
-    [onNarrowContainer]: {
-        flexDirection: 'column',
-    },
 }));
 
 const InputContainer = styled('div')(({ theme }) => ({
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
index 27cae4602a..a2754810c7 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
@@ -2,15 +2,12 @@ import Clear from '@mui/icons-material/Clear';
 import { Chip, type ChipProps, styled, type Theme } from '@mui/material';
 import { type FC, forwardRef, type PropsWithChildren, useRef } from 'react';
 
-const ValueListWrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexFlow: 'row wrap',
-    gap: theme.spacing(1),
-}));
+const ValueListWrapper = styled('div')({
+    display: 'contents',
+});
 
 const StyledList = styled('ul')({
     listStyle: 'none',
-    padding: 0,
     display: 'contents',
 });