From 3188d9092d929ff21dff439dc44720dc2f6c754f Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Thu, 21 Aug 2025 14:40:56 +0000
Subject: [PATCH 1/8] latest

---
 .../Presto/SqlQueryInput/index.tsx            |  4 ++-
 .../QueryStatus}/Results.tsx                  |  4 +--
 .../QueryStatus}/index.module.css             |  3 +-
 .../QueryStatus}/index.tsx                    |  8 ++---
 .../SearchControls/index.module.css           | 13 +++++++
 .../pages/SearchPage/SearchControls/index.tsx | 34 ++++++++++++-------
 .../client/src/pages/SearchPage/index.tsx     |  6 +---
 7 files changed, 46 insertions(+), 26 deletions(-)
 rename components/webui/client/src/pages/SearchPage/{SearchQueryStatus => SearchControls/QueryStatus}/Results.tsx (93%)
 rename components/webui/client/src/pages/SearchPage/{SearchQueryStatus => SearchControls/QueryStatus}/index.module.css (61%)
 rename components/webui/client/src/pages/SearchPage/{SearchQueryStatus => SearchControls/QueryStatus}/index.tsx (82%)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index c831a6c53c..bdf12592cf 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -18,7 +18,9 @@ const SqlQueryInput = () => {
 
     return (
         <div className={styles["input"] || ""}>
-            <SqlEditor onChange={handleChange}/>
+            <SqlEditor
+                height={"150px"}
+                onChange={handleChange}/>
         </div>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/Results.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/Results.tsx
similarity index 93%
rename from components/webui/client/src/pages/SearchPage/SearchQueryStatus/Results.tsx
rename to components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/Results.tsx
index b67283fcfc..e7f0ace9f9 100644
--- a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/Results.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/Results.tsx
@@ -5,8 +5,8 @@ import {
     Typography,
 } from "antd";
 
-import useSearchStore from "../SearchState/index";
-import {SEARCH_UI_STATE} from "../SearchState/typings";
+import useSearchStore from "../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
 
 
 const {Text} = Typography;
diff --git a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
similarity index 61%
rename from components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.module.css
rename to components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
index 29f1e3b1ab..007637fd40 100644
--- a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
@@ -1,6 +1,7 @@
 .status {
   margin-left: 2px;
-  margin-top: 4px;
+  padding-top: 4px;
+  margin-bottom: -4px;
 }
 
 .badge {
diff --git a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
similarity index 82%
rename from components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.tsx
rename to components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
index ee152f39fc..25e66cabb2 100644
--- a/components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
@@ -1,7 +1,7 @@
 import {Typography} from "antd";
 
-import useSearchStore from "../SearchState/index";
-import {SEARCH_UI_STATE} from "../SearchState/typings";
+import useSearchStore from "../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
 import styles from "./index.module.css";
 import Results from "./Results";
 
@@ -13,7 +13,7 @@ const {Text} = Typography;
  *
  * @return
  */
-const SearchQueryStatus = () => {
+const QueryStatus = () => {
     const {
         searchJobId,
         searchUiState,
@@ -38,4 +38,4 @@ const SearchQueryStatus = () => {
 };
 
 
-export default SearchQueryStatus;
+export default QueryStatus;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
index 3f31660f7b..454c0803a6 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
@@ -2,3 +2,16 @@
     display: flex;
     gap: 10px;
 }
+
+.prestoSearchControlsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.buttonAndStatusRow {
+    display: flex;
+    align-items: flex-end;
+    gap: 10px;
+}
+
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index d44deed61b..70832ac287 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -9,6 +9,7 @@ import styles from "./index.module.css";
 import SqlQueryInput from "./Presto/SqlQueryInput";
 import SqlSearchButton from "./Presto/SqlSearchButton";
 import QueryInput from "./QueryInput";
+import QueryStatus from "./QueryStatus";
 import SearchButton from "./SearchButton";
 import TimeRangeInput from "./TimeRangeInput";
 
@@ -23,30 +24,37 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
 };
 
 /**
- * Renders controls for submitting queries.
+ * Renders controls for submitting queries and the query status.
  *
  * @return
  */
 const SearchControls = () => {
     return (
         <form onSubmit={handleSubmit}>
-            <div className={styles["searchControlsContainer"]}>
-                {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
-                    (
-                        <>
+            {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
+                (
+                    <div>
+                        <div className={styles["searchControlsContainer"]}>
                             {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
                             <QueryInput/>
                             <TimeRangeInput/>
                             <SearchButton/>
-                        </>
-                    ) :
-                    (
-                        <>
-                            <SqlQueryInput/>
+                        </div>
+                        <div className={styles["statusRow"]}>
+                            <QueryStatus/>
+                        </div>
+                    </div>
+                ) :
+                (
+
+                    <div className={styles["prestoSearchControlsContainer"]}>
+                        <SqlQueryInput/>
+                        <div className={styles["buttonAndStatusRow"]}>
                             <SqlSearchButton/>
-                        </>
-                    )}
-            </div>
+                            <QueryStatus/>
+                        </div>
+                    </div>
+                )}
         </form>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/index.tsx b/components/webui/client/src/pages/SearchPage/index.tsx
index d49a358801..54d5da0fa9 100644
--- a/components/webui/client/src/pages/SearchPage/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/index.tsx
@@ -5,7 +5,6 @@ import {
 import styles from "./index.module.css";
 import {ProgressBar} from "./Presto/ProgressBar";
 import SearchControls from "./SearchControls";
-import SearchQueryStatus from "./SearchQueryStatus";
 import SearchResultsTable from "./SearchResults/SearchResultsTable";
 import SearchResultsTimeline from "./SearchResults/SearchResultsTimeline";
 import {useUiUpdateOnDoneSignal} from "./SearchState/useUpdateStateWithMetadata";
@@ -23,10 +22,7 @@ const SearchPage = () => {
         <>
             {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO && <ProgressBar/>}
             <div className={styles["searchPageContainer"]}>
-                <div>
-                    <SearchControls/>
-                    <SearchQueryStatus/>
-                </div>
+                <SearchControls/>
                 <SearchResultsTimeline/>
                 <SearchResultsTable/>
             </div>

From d9f2b749aa10ed4eb33ba840780539f6b5777822 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Thu, 21 Aug 2025 14:44:28 +0000
Subject: [PATCH 2/8] latest

---
 .../SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index bdf12592cf..e4063ef92d 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -19,7 +19,6 @@ const SqlQueryInput = () => {
     return (
         <div className={styles["input"] || ""}>
             <SqlEditor
-                height={"150px"}
                 onChange={handleChange}/>
         </div>
     );

From c5f23d5d687c5dc04f5e0cb85c51f5a8e6343266 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Thu, 21 Aug 2025 14:45:22 +0000
Subject: [PATCH 3/8] latest

---
 .../SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index e4063ef92d..c831a6c53c 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -18,8 +18,7 @@ const SqlQueryInput = () => {
 
     return (
         <div className={styles["input"] || ""}>
-            <SqlEditor
-                onChange={handleChange}/>
+            <SqlEditor onChange={handleChange}/>
         </div>
     );
 };

From 9dca18f3da36de808394dca768c17ce224eb59ac Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Wed, 27 Aug 2025 16:05:59 +0000
Subject: [PATCH 4/8] latest

---
 .../SearchPage/SearchControls/index.module.css      |  3 ++-
 .../src/pages/SearchPage/SearchControls/index.tsx   | 13 ++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
index 454c0803a6..c3c93a3271 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
@@ -11,7 +11,8 @@
 
 .buttonAndStatusRow {
     display: flex;
-    align-items: flex-end;
+    align-items: flex-start; /* Align items to the top */
+    justify-content: space-between; /* Put space between status and button */
     gap: 10px;
 }
 
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 70832ac287..5dc6a597e9 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -40,9 +40,7 @@ const SearchControls = () => {
                             <TimeRangeInput/>
                             <SearchButton/>
                         </div>
-                        <div className={styles["statusRow"]}>
-                            <QueryStatus/>
-                        </div>
+                        <QueryStatus/>
                     </div>
                 ) :
                 (
@@ -50,8 +48,13 @@ const SearchControls = () => {
                     <div className={styles["prestoSearchControlsContainer"]}>
                         <SqlQueryInput/>
                         <div className={styles["buttonAndStatusRow"]}>
-                            <SqlSearchButton/>
-                            <QueryStatus/>
+                            <div style={{ alignSelf: "flex-start" }}>
+                                <QueryStatus/>
+                            </div>
+                            <div style={{ flex: 1 }} />
+                            <div style={{ alignSelf: "flex-end" }}>
+                                <SqlSearchButton/>
+                            </div>
                         </div>
                     </div>
                 )}

From 8cf4126c82ef88d1260220375a3b7e3996e7e760 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Wed, 27 Aug 2025 17:11:58 +0000
Subject: [PATCH 5/8] latest

---
 .../client/src/components/SqlEditor/index.tsx | 50 ++++++++++++-------
 .../SqlSearchButton/CancelButton/index.tsx    |  2 +-
 .../SqlSearchButton/RunButton/index.tsx       |  2 +-
 .../Presto/SqlSearchButton/index.module.css   |  2 +-
 .../QueryStatus/index.module.css              |  6 ---
 .../SearchControls/QueryStatus/index.tsx      |  2 +-
 .../SearchControls/index.module.css           | 12 ++++-
 .../pages/SearchPage/SearchControls/index.tsx | 12 ++---
 8 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index b1e687d4a9..091a8956fd 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -3,6 +3,7 @@ import {
     useEffect,
     useImperativeHandle,
     useRef,
+    useState,
 } from "react";
 
 import {
@@ -53,11 +54,23 @@ const SqlEditor = (props: SqlEditorProps) => {
         onEditorReady?.();
     }, [onEditorReady]);
 
-    // Define disabled theme for monaco editor
+    // Define default and disabled themes for monaco editor
     useEffect(() => {
         if (null === monacoEditor) {
             return;
         }
+        // Default theme to match AntD input
+        monacoEditor.editor.defineTheme("default-theme", {
+            base: "vs",
+            inherit: true,
+            rules: [],
+            colors: {
+                "editor.background": color(token.colorBgContainer).hexa(),
+                "editor.foreground": color(token.colorText).hexa(),
+                "focusBorder": "#0000", // transparent
+            },
+        });
+        // Disabled theme uses vs as base
         monacoEditor.editor.defineTheme("disabled-theme", {
             base: "vs",
             inherit: true,
@@ -65,9 +78,7 @@ const SqlEditor = (props: SqlEditorProps) => {
             colors: {
                 "editor.background": color(token.colorBgContainerDisabled).hexa(),
                 "editor.foreground": color(token.colorTextDisabled).hexa(),
-
-                // transparent
-                "focusBorder": "#00000000",
+                "focusBorder": "#0000", // transparent
             },
         });
     }, [
@@ -77,39 +88,44 @@ const SqlEditor = (props: SqlEditorProps) => {
 
     return (
         <div
-            style={
-                disabled ?
-                    {pointerEvents: "none"} :
-                    {}
+            style={{
+                border: `1px solid ${token.colorBorder}`,
+                borderRadius: token.borderRadius,
+                pointerEvents: disabled ? "none" : "auto",
+            }
             }
         >
             <Editor
                 language={"sql"}
                 loading={
                     <div
-                        style={{
-                            backgroundColor: "white",
-                            height: "100%",
-                            width: "100%",
-                        }}/>
+                    style={{
+                        backgroundColor: token.colorBgContainer,
+                        height: "100%",
+                        width: "100%",
+                    }}/>
                 }
                 options={{
                     automaticLayout: true,
                     folding: false,
-                    fontSize: 16,
                     lineNumbers: "off",
                     minimap: {enabled: false},
                     overviewRulerBorder: false,
                     placeholder: "Enter your SQL query",
-                    renderLineHighlightOnlyWhenFocus: true,
+                    renderLineHighlight: "none",
                     scrollBeyondLastLine: false,
                     wordWrap: "on",
+                    padding: {
+                    top: token.paddingXS,
+                    bottom: token.paddingXS,
+                    },
                 }}
                 theme={disabled ?
                     "disabled-theme" :
-                    "light"}
+                    "default-theme"}
                 onMount={handleEditorDidMount}
-                {...editorProps}/>
+                {...editorProps}
+            />
         </div>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx
index fb56f153eb..102580c602 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx
@@ -34,7 +34,7 @@ const CancelButton = () => {
                 className={styles["cancelButton"] || ""}
                 color={"red"}
                 icon={<CloseOutlined/>}
-                size={"large"}
+                size={"middle"}
                 variant={"solid"}
                 onClick={handleClick}
             >
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx
index bcd6ad9b0c..de6b6dc4c8 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx
@@ -36,7 +36,7 @@ const RunButton = () => {
                 className={styles["runButton"] || ""}
                 color={"green"}
                 icon={<CaretRightOutlined/>}
-                size={"large"}
+                size={"middle"}
                 variant={"solid"}
                 disabled={isQueryStringEmpty ||
                     searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css
index 3552bb49c9..f7ce0b59e3 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css
@@ -1,3 +1,3 @@
 .runButtonContainer {
-    width: 130px;
+    width: 100px;
 }
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
index 007637fd40..97db2e6817 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
@@ -1,9 +1,3 @@
-.status {
-  margin-left: 2px;
-  padding-top: 4px;
-  margin-bottom: -4px;
-}
-
 .badge {
     padding-bottom: 4px;
 }
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
index 26cb430752..2ffecbda58 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
@@ -20,7 +20,7 @@ const QueryStatus = () => {
     } = useSearchStore();
 
     return (
-        <div className={styles["status"]}>
+        <div>
             {(searchUiState === SEARCH_UI_STATE.QUERYING ||
                 searchUiState === SEARCH_UI_STATE.DONE) && (
                 <Text type={"secondary"}>
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
index c3c93a3271..ddda684b77 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
@@ -11,8 +11,16 @@
 
 .buttonAndStatusRow {
     display: flex;
-    align-items: flex-start; /* Align items to the top */
-    justify-content: space-between; /* Put space between status and button */
+    align-items: flex-start;
+    justify-content: space-between;
     gap: 10px;
 }
 
+.status {
+    margin-left: 2px;
+    padding-top: 4px;
+}
+
+.statusPresto {
+    margin-left: 2px;
+}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 5dc6a597e9..776d8a64c7 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -40,21 +40,19 @@ const SearchControls = () => {
                             <TimeRangeInput/>
                             <SearchButton/>
                         </div>
-                        <QueryStatus/>
+                        <div className={styles["status"]}>
+                            <QueryStatus/>
+                        </div>
                     </div>
                 ) :
                 (
-
                     <div className={styles["prestoSearchControlsContainer"]}>
                         <SqlQueryInput/>
                         <div className={styles["buttonAndStatusRow"]}>
-                            <div style={{ alignSelf: "flex-start" }}>
+                            <div className={styles["statusPresto"]}>
                                 <QueryStatus/>
                             </div>
-                            <div style={{ flex: 1 }} />
-                            <div style={{ alignSelf: "flex-end" }}>
-                                <SqlSearchButton/>
-                            </div>
+                            <SqlSearchButton/>
                         </div>
                     </div>
                 )}

From b09c0ca52eed4bbdffba216f8822457fb99cfa26 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Wed, 27 Aug 2025 17:14:09 +0000
Subject: [PATCH 6/8] latest

---
 .../client/src/components/SqlEditor/index.tsx | 35 ++++++++++---------
 .../src/components/SqlEditor/monaco-loader.ts |  5 +--
 .../QueryStatus/index.module.css              |  3 --
 .../SearchControls/QueryStatus/index.tsx      |  1 -
 4 files changed, 21 insertions(+), 23 deletions(-)
 delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index 091a8956fd..a2a3b95d81 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -3,7 +3,6 @@ import {
     useEffect,
     useImperativeHandle,
     useRef,
-    useState,
 } from "react";
 
 import {
@@ -59,6 +58,7 @@ const SqlEditor = (props: SqlEditorProps) => {
         if (null === monacoEditor) {
             return;
         }
+
         // Default theme to match AntD input
         monacoEditor.editor.defineTheme("default-theme", {
             base: "vs",
@@ -67,9 +67,10 @@ const SqlEditor = (props: SqlEditorProps) => {
             colors: {
                 "editor.background": color(token.colorBgContainer).hexa(),
                 "editor.foreground": color(token.colorText).hexa(),
-                "focusBorder": "#0000", // transparent
+                "focusBorder": "#0000",
             },
         });
+
         // Disabled theme uses vs as base
         monacoEditor.editor.defineTheme("disabled-theme", {
             base: "vs",
@@ -78,7 +79,7 @@ const SqlEditor = (props: SqlEditorProps) => {
             colors: {
                 "editor.background": color(token.colorBgContainerDisabled).hexa(),
                 "editor.foreground": color(token.colorTextDisabled).hexa(),
-                "focusBorder": "#0000", // transparent
+                "focusBorder": "#0000",
             },
         });
     }, [
@@ -91,19 +92,20 @@ const SqlEditor = (props: SqlEditorProps) => {
             style={{
                 border: `1px solid ${token.colorBorder}`,
                 borderRadius: token.borderRadius,
-                pointerEvents: disabled ? "none" : "auto",
-            }
-            }
+                pointerEvents: disabled ?
+                    "none" :
+                    "auto",
+            }}
         >
             <Editor
                 language={"sql"}
                 loading={
                     <div
-                    style={{
-                        backgroundColor: token.colorBgContainer,
-                        height: "100%",
-                        width: "100%",
-                    }}/>
+                        style={{
+                            backgroundColor: token.colorBgContainer,
+                            height: "100%",
+                            width: "100%",
+                        }}/>
                 }
                 options={{
                     automaticLayout: true,
@@ -111,21 +113,20 @@ const SqlEditor = (props: SqlEditorProps) => {
                     lineNumbers: "off",
                     minimap: {enabled: false},
                     overviewRulerBorder: false,
+                    padding: {
+                        top: token.paddingXS,
+                        bottom: token.paddingXS,
+                    },
                     placeholder: "Enter your SQL query",
                     renderLineHighlight: "none",
                     scrollBeyondLastLine: false,
                     wordWrap: "on",
-                    padding: {
-                    top: token.paddingXS,
-                    bottom: token.paddingXS,
-                    },
                 }}
                 theme={disabled ?
                     "disabled-theme" :
                     "default-theme"}
                 onMount={handleEditorDidMount}
-                {...editorProps}
-            />
+                {...editorProps}/>
         </div>
     );
 };
diff --git a/components/webui/client/src/components/SqlEditor/monaco-loader.ts b/components/webui/client/src/components/SqlEditor/monaco-loader.ts
index 05c58be25e..5623d7d94d 100644
--- a/components/webui/client/src/components/SqlEditor/monaco-loader.ts
+++ b/components/webui/client/src/components/SqlEditor/monaco-loader.ts
@@ -1,11 +1,12 @@
-/* eslint-disable import/default, @stylistic/max-len */
+/* eslint-disable import/default */
 import {loader} from "@monaco-editor/react";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+
 import "monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js";
 
 
-/* eslint-enable import/default, @stylistic/max-len */
+/* eslint-enable import/default */
 
 
 self.MonacoEnvironment = {
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
deleted file mode 100644
index 97db2e6817..0000000000
--- a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.badge {
-    padding-bottom: 4px;
-}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
index 2ffecbda58..597a3bf176 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx
@@ -2,7 +2,6 @@ import {Typography} from "antd";
 
 import useSearchStore from "../../SearchState/index";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
-import styles from "./index.module.css";
 import Results from "./Results";
 
 

From 4e3e12b27b81c4f003052a12d6405bc14862bc63 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Wed, 27 Aug 2025 17:24:18 +0000
Subject: [PATCH 7/8] latest

---
 .../webui/client/src/components/SqlEditor/index.tsx   |  2 --
 .../pages/SearchPage/SearchControls/index.module.css  | 11 +++--------
 .../src/pages/SearchPage/SearchControls/index.tsx     |  8 ++++----
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index a2a3b95d81..98a9c3259a 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -59,7 +59,6 @@ const SqlEditor = (props: SqlEditorProps) => {
             return;
         }
 
-        // Default theme to match AntD input
         monacoEditor.editor.defineTheme("default-theme", {
             base: "vs",
             inherit: true,
@@ -71,7 +70,6 @@ const SqlEditor = (props: SqlEditorProps) => {
             },
         });
 
-        // Disabled theme uses vs as base
         monacoEditor.editor.defineTheme("disabled-theme", {
             base: "vs",
             inherit: true,
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
index ddda684b77..b476cc99cf 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
@@ -1,11 +1,11 @@
 .searchControlsContainer {
     display: flex;
-    gap: 10px;
+    flex-direction: column;
+    gap: 5px;
 }
 
-.prestoSearchControlsContainer {
+.inputsAndButtonRow {
     display: flex;
-    flex-direction: column;
     gap: 10px;
 }
 
@@ -18,9 +18,4 @@
 
 .status {
     margin-left: 2px;
-    padding-top: 4px;
-}
-
-.statusPresto {
-    margin-left: 2px;
 }
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 776d8a64c7..557511175d 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -33,8 +33,8 @@ const SearchControls = () => {
         <form onSubmit={handleSubmit}>
             {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
                 (
-                    <div>
-                        <div className={styles["searchControlsContainer"]}>
+                    <div className={styles["searchControlsContainer"]}>
+                        <div className={styles["inputsAndButtonRow"]}>
                             {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
                             <QueryInput/>
                             <TimeRangeInput/>
@@ -46,10 +46,10 @@ const SearchControls = () => {
                     </div>
                 ) :
                 (
-                    <div className={styles["prestoSearchControlsContainer"]}>
+                    <div className={styles["searchControlsContainer"]}>
                         <SqlQueryInput/>
                         <div className={styles["buttonAndStatusRow"]}>
-                            <div className={styles["statusPresto"]}>
+                            <div className={styles["status"]}>
                                 <QueryStatus/>
                             </div>
                             <SqlSearchButton/>

From a1f3f44ff300795a3ad2adf79aca7adc6a2e5b84 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Wed, 27 Aug 2025 20:44:27 +0000
Subject: [PATCH 8/8] latest

---
 components/webui/client/src/pages/SearchPage/index.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/index.module.css b/components/webui/client/src/pages/SearchPage/index.module.css
index b62e697498..389eb3e29b 100644
--- a/components/webui/client/src/pages/SearchPage/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/index.module.css
@@ -1,6 +1,6 @@
 .searchPageContainer {
     display: flex;
     flex-direction: column;
-    gap: 16px; 
-    padding: 24px 16px 16px;
+    gap: 16px;
+    padding: 16px 16px 16px;
 }