fix: constraint-related UI fixes (#1069)

* fix: constraint-related UI fixes

* test spans on values list

* fix: values truncation, misc UI fixes

* fix: no longer assign const variable (debug)

frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts

@@ -3,13 +3,11 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     constraintIconContainer: {
         backgroundColor: theme.palette.primary.main,
-        height: '28px',
-        width: '28px',
         borderRadius: '50%',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        marginRight: '2rem',
+        marginRight: theme.spacing(2),
         [theme.breakpoints.down(650)]: {
             marginBottom: '1rem',
             marginRight: 0,
@@ -17,8 +15,6 @@ export const useStyles = makeStyles()(theme => ({
     },
     constraintIcon: {
         fill: '#fff',
-        width: '26px',
-        height: '26px',
     },
     accordion: {
         border: `1px solid ${theme.palette.grey[300]}`,
@@ -44,7 +40,7 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         alignItems: 'center',
         width: '100%',
-        [theme.breakpoints.down(650)]: {
+        [theme.breakpoints.down(710)]: {
             flexDirection: 'column',
             alignItems: 'center',
             position: 'relative',
@@ -56,10 +52,13 @@ export const useStyles = makeStyles()(theme => ({
     },
     headerValues: {
         fontSize: theme.fontSizes.smallBody,
-        color: theme.palette.primary.main,
     },
     headerValuesExpand: {
         fontSize: theme.fontSizes.smallBody,
+        color: theme.palette.primary.dark,
+        [theme.breakpoints.down(710)]: {
+            textAlign: 'center',
+        },
     },
     headerConstraintContainer: {
         minWidth: '220px',
@@ -69,11 +68,6 @@ export const useStyles = makeStyles()(theme => ({
             paddingRight: 0,
         },
     },
-    headerViewValuesContainer: {
-        [theme.breakpoints.down(990)]: {
-            display: 'none',
-        },
-    },
     editingBadge: {
         borderRadius: theme.shape.borderRadiusExtraLarge,
         padding: '0.25rem 0.5rem',
@@ -122,9 +116,8 @@ export const useStyles = makeStyles()(theme => ({
     headerActions: {
         marginLeft: 'auto',
         whiteSpace: 'nowrap',
-        [theme.breakpoints.down(660)]: {
+        [theme.breakpoints.down(710)]: {
-            marginLeft: '0',
+            display: 'none',
-            marginTop: '0.5rem',
         },
     },
     accordionDetails: {
@@ -140,9 +133,8 @@ export const useStyles = makeStyles()(theme => ({
     summary: {
         border: 'none',
         padding: '0.25rem 1rem',
-        height: '85px',
+        '&:hover .valuesExpandLabel': {
-        [theme.breakpoints.down(770)]: {
+            textDecoration: 'underline',
-            height: '200px',
         },
     },
     settingsParagraph: {

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts

@@ -2,6 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     container: {
+        width: '100%',
         display: 'grid',
         gap: '1rem',
     },

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx

@@ -72,9 +72,9 @@ const SingleValue = ({ value, operator }: ISingleValueProps) => {
             <Chip
                 label={
                     <StringTruncator
-                        maxWidth="200"
+                        maxWidth="400"
                         text={value}
-                        maxLength={25}
+                        maxLength={50}
                     />
                 }
                 className={styles.chip}
@@ -95,7 +95,15 @@ const MultipleValues = ({ values }: IMultipleValuesProps) => {
 
     return (
         <>
-            <ConstraintValueSearch filter={filter} setFilter={setFilter} />
+            <ConditionallyRender
+                condition={values.length > 20}
+                show={
+                    <ConstraintValueSearch
+                        filter={filter}
+                        setFilter={setFilter}
+                    />
+                }
+            />
             {values
                 .filter(value => value.includes(filter))
                 .map((value, index) => (
@@ -103,9 +111,9 @@ const MultipleValues = ({ values }: IMultipleValuesProps) => {
                         key={`${value}-${index}`}
                         label={
                             <StringTruncator
-                                maxWidth="200"
+                                maxWidth="400"
                                 text={value}
-                                maxLength={25}
+                                maxLength={50}
                                 className={styles.chipValue}
                             />
                         }

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx

@@ -1,5 +1,4 @@
-import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { Chip, IconButton, Tooltip, styled } from '@mui/material';
-import { Chip, useMediaQuery, IconButton, Tooltip } from '@mui/material';
 import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
 import { Delete, Edit } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
@@ -10,6 +9,44 @@ import React from 'react';
 import { formatConstraintValue } from 'utils/formatConstraintValue';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator';
+import classnames from 'classnames';
+
+const StyledHeaderText = styled('span')(({ theme }) => ({
+    display: '-webkit-box',
+    WebkitLineClamp: 3,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    maxWidth: '100px',
+    minWidth: '100px',
+    marginRight: '10px',
+    wordBreak: 'break-word',
+    fontSize: theme.fontSizes.smallBody,
+    [theme.breakpoints.down(710)]: {
+        textAlign: 'center',
+        padding: theme.spacing(1, 0),
+        marginRight: 'inherit',
+        maxWidth: 'inherit',
+    },
+}));
+
+const StyledValuesSpan = styled('span')(({ theme }) => ({
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    wordBreak: 'break-word',
+    fontSize: theme.fontSizes.smallBody,
+    [theme.breakpoints.down(710)]: {
+        margin: theme.spacing(1, 0),
+        textAlign: 'center',
+    },
+}));
+
+const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
+    [theme.breakpoints.down(710)]: {
+        margin: theme.spacing(1, 0),
+    },
+}));
 
 interface IConstraintAccordionViewHeaderProps {
     compact: boolean;
@@ -28,9 +65,6 @@ export const ConstraintAccordionViewHeader = ({
 }: IConstraintAccordionViewHeaderProps) => {
     const { classes: styles } = useStyles();
     const { locationSettings } = useLocationSettings();
-    const smallScreen = useMediaQuery(`(max-width:${790}px)`);
-
-    const minWidthHeader = compact || smallScreen ? '100px' : '175px';
 
     const onEditClick =
         onEdit &&
@@ -50,42 +84,43 @@ export const ConstraintAccordionViewHeader = ({
         <div className={styles.headerContainer}>
             <ConstraintIcon />
             <div className={styles.headerMetaInfo}>
-                <div style={{ minWidth: minWidthHeader }}>
+                <Tooltip title={constraint.contextName} arrow>
-                    <StringTruncator
+                    <StyledHeaderText>
-                        text={constraint.contextName}
+                        {constraint.contextName}
-                        maxWidth="175px"
+                    </StyledHeaderText>
-                        maxLength={25}
+                </Tooltip>
-                    />
-                </div>
                 <div className={styles.headerConstraintContainer}>
                     <ConstraintOperator constraint={constraint} />
                 </div>
-                <div className={styles.headerViewValuesContainer}>
+                <ConditionallyRender
-                    <ConditionallyRender
+                    condition={singleValue}
-                        condition={singleValue}
+                    show={
-                        show={
+                        <StyledSingleValueChip
-                            <Chip
+                            label={formatConstraintValue(
-                                label={formatConstraintValue(
+                                constraint,
-                                    constraint,
+                                locationSettings
-                                    locationSettings
+                            )}
+                        />
+                    }
+                    elseShow={
+                        <div className={styles.headerValuesContainer}>
+                            <StyledValuesSpan>
+                                {constraint?.values
+                                    ?.map(value => value)
+                                    .join(', ')}
+                            </StyledValuesSpan>
+                            <p
+                                className={classnames(
+                                    styles.headerValuesExpand,
+                                    'valuesExpandLabel'
                                 )}
-                            />
+                            >
-                        }
+                                Expand to view all ({constraint?.values?.length}
-                        elseShow={
+                                )
-                            <div className={styles.headerValuesContainer}>
+                            </p>
-                                <p className={styles.headerValues}>
+                        </div>
-                                    {constraint?.values?.length}{' '}
+                    }
-                                    {constraint?.values?.length === 1
+                />
-                                        ? 'value'
-                                        : 'values'}
-                                </p>
-                                <p className={styles.headerValuesExpand}>
-                                    Expand to view
-                                </p>
-                            </div>
-                        }
-                    />
-                </div>
             </div>
             <div className={styles.headerActions}>
                 <ConditionallyRender

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.styles.ts

@@ -6,6 +6,7 @@ export const useStyles = makeStyles()(theme => ({
         margin: '0.25rem',
     },
     paragraph: {
+        display: 'inline',
         margin: '0.25rem 0',
         maxWidth: '95%',
         textAlign: 'center',

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts

@@ -13,6 +13,8 @@ export const useStyles = makeStyles()(theme => ({
     link: {
         textDecoration: 'none',
         fontWeight: theme.fontWeight.bold,
-        color: theme.palette.primary.main,
+        '&:hover': {
+            textDecoration: 'underline',
+        },
     },
 }));

frontend/src/component/project/ProjectCard/ProjectCard.styles.ts

@@ -14,6 +14,10 @@ export const useStyles = makeStyles()(theme => ({
         [theme.breakpoints.down('sm')]: {
             justifyContent: 'center',
         },
+        '&:hover': {
+            transition: 'background-color 0.2s ease-in-out',
+            backgroundColor: theme.palette.grey[100],
+        },
     },
     header: {
         display: 'flex',