[Security Solution][Endpoint] Set horizontal scrollbar to fix an issu…

…e with match_any operator (#124516) (#124998) * Set max width 100% to fix an issue with match_any operator * Adds horizontal scrollbar for large criteria condition values * Adds horizontal scrollbar for large criteria condition values to the whole entry, not only on values Co-authored-by: Kibana Machine <[email protected]> (cherry picked from commit ce094b9) Co-authored-by: David Sánchez <[email protected]>
elastic · Feb 8, 2022 · 0099773 · 0099773
1 parent a605c00
commit 0099773
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/...ution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx b/...ution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx
@@ -146,15 +146,17 @@ export const CriteriaConditions = memo<CriteriaConditionsProps>(
         {entries.map(({ field, type, value, operator, entries: nestedEntries = [] }) => {
           return (
             <div data-test-subj={getTestId('condition')} key={field + type + value}>
-              <EuiExpression
-                description={<StyledCondition>{CONDITION_AND}</StyledCondition>}
-                value={field}
-                color="subdued"
-              />
-              <EuiExpression
-                description={getEntryOperator(type, operator)}
-                value={getEntryValue(type, value)}
-              />
+              <div className="eui-xScroll">
+                <EuiExpression
+                  description={<StyledCondition>{CONDITION_AND}</StyledCondition>}
+                  value={field}
+                  color="subdued"
+                />
+                <EuiExpression
+                  description={getEntryOperator(type, operator)}
+                  value={getEntryValue(type, value)}
+                />
+              </div>
               {getNestedEntriesContent(type, nestedEntries)}
             </div>
           );