[Unified Search] Limit height of query bar input for long KQL queries (…

…elastic#193737)
miqdigital · Oct 13, 2024 · d6e2b26 · d6e2b26
1 parent a9b9748
commit d6e2b26
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.scss b/src/plugins/unified_search/public/query_string_input/query_string_input.scss
@@ -15,6 +15,15 @@
   overflow: visible !important; // Override EUI form control
   display: flex;
   flex: 1 1 100%;
+
+  &--withSuggestionVisible .kbnQueryBar__textarea {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  >.euiFormControlLayoutIcons {
+    max-height: $euiFormControlHeight;
+  }
 }
 
 .kbnQueryBar__textarea {
@@ -43,11 +52,8 @@
     overflow-x: auto;
     overflow-y: auto;
     white-space: normal;
-  }
-
-  &.kbnQueryBar__textarea--isSuggestionsVisible {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+    max-height: calc(35vh - 100px);
+    min-height: $euiFormControlHeight;
   }
 
   ~.euiFormControlLayoutIcons {

diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx
@@ -792,14 +792,15 @@ export default class QueryStringInputUI extends PureComponent<QueryStringInputPr
       ) : undefined;
 
     const containerClassName = classNames('kbnQueryBar__wrap', this.props.className);
-    const inputClassName = classNames('kbnQueryBar__textarea', {
+    const inputClassName = classNames('kbnQueryBar__textarea', 'eui-scrollBar', {
       'kbnQueryBar__textarea--withIcon': this.props.iconType,
       'kbnQueryBar__textarea--isClearable': this.props.isClearable,
       'kbnQueryBar__textarea--withPrepend': prependElement,
-      'kbnQueryBar__textarea--isSuggestionsVisible':
+    });
+    const inputWrapClassName = classNames('kbnQueryBar__textareaWrap', {
+      'kbnQueryBar__textareaWrap--withSuggestionVisible':
         isSuggestionsVisible && !isEmpty(this.state.suggestions),
     });
-    const inputWrapClassName = classNames('kbnQueryBar__textareaWrap');
     return (
       <div className={containerClassName} onFocus={this.onFocusWithin} onBlur={this.onBlurWithin}>
         {prependElement}