From d6e2b266e81e857a30c7976c2622634751978a30 Mon Sep 17 00:00:00 2001
From: Linghao Su <linghao.su@daocloud.io>
Date: Sun, 13 Oct 2024 23:39:18 +0800
Subject: [PATCH] [Unified Search] Limit height of query bar input for long KQL
 queries (#193737)

---
 .../query_string_input/query_string_input.scss   | 16 +++++++++++-----
 .../query_string_input/query_string_input.tsx    |  7 ++++---
 2 files changed, 15 insertions(+), 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
index a8642ae0f9846..46473af849c9b 100644
--- 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
index 2fc06e4aeaf53..2e3b0fab0a161 100644
--- 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}