From d8b0365440ef49ca32194c07b70a463669630f9d Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Sat, 14 Jun 2025 23:21:07 +0530
Subject: [PATCH] feat: ui improvements

---
 .../QueryBuilderV2/QueryBuilderV2.styles.scss |  9 +++++-
 .../QueryAddOns/HavingFilter/HavingFilter.tsx |  3 +-
 .../QueryAddOns/QueryAddOns.styles.scss       | 28 +++++++++++++++++++
 .../QueryAggregation.styles.scss              |  3 +-
 .../QueryAggregationSelect.tsx                |  1 +
 .../QueryV2/QuerySearch/QuerySearch.tsx       | 10 +++----
 .../QueryBuilderV2/QueryV2/QueryV2.tsx        |  4 +--
 frontend/src/periscope.scss                   |  2 ++
 8 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
index c8b52b5fcb84..097e5a894f45 100644
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -389,9 +389,16 @@
 	.qb-search-filter-container {
 		display: flex;
 		flex-direction: row;
-		align-items: center;
+		align-items: flex-start;
 		gap: 8px;
 
+		.traces-search-filter-container {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+		}
+
 		.ant-select {
 			height: auto;
 		}
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx
index 07e89688460a..1e055438b4b4 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx
@@ -237,10 +237,9 @@ function HavingFilter({ onClose }: { onClose: () => void }): JSX.Element {
 			<div className="having-filter-select-container">
 				<CodeMirror
 					value={input}
+					theme={copilot}
 					onChange={setInput}
 					className="having-filter-select-editor"
-					width="100%"
-					theme={copilot}
 					extensions={[
 						havingAutocomplete,
 						javascript({ jsx: false, typescript: false }),
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
index 9b8c78d9c814..47808ecd6d19 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
@@ -72,6 +72,7 @@
 		.having-filter-select-editor {
 			border-radius: 2px;
 			flex: 1;
+			width: calc(100% - 40px);
 
 			.cm-content {
 				padding: 0;
@@ -175,6 +176,26 @@
 					display: none !important;
 				}
 
+				.cm-scroller {
+					scrollbar-width: none;
+
+					&::-webkit-scrollbar {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-thumb {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-track {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-corner {
+						display: none;
+					}
+				}
+
 				.cm-line {
 					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
@@ -229,10 +250,17 @@
 	grid-template-columns: repeat(2, 1fr);
 	gap: 8px;
 	padding-bottom: 8px;
+	position: relative;
 
 	.add-on-content {
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
+
+		max-width: 100%;
+		min-width: 100%;
+
+		box-sizing: border-box;
+		position: relative;
 	}
 }
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
index 06c30c0a2e7c..dc2e2ad84e88 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
@@ -6,7 +6,7 @@
 		display: flex;
 		flex-direction: row;
 		gap: 8px;
-		align-items: center;
+		align-items: flex-start;
 
 		.query-aggregation-options-input {
 			width: 100%;
@@ -42,6 +42,7 @@
 			.query-aggregation-select-editor {
 				border-radius: 2px;
 				flex: 1;
+				min-width: 0;
 
 				.cm-content {
 					padding: 0;
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
index 20b8d759016c..5fec5af7e7c5 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
@@ -423,6 +423,7 @@ function QueryAggregationSelect(): JSX.Element {
 					chipPlugin,
 					aggregatorAutocomplete,
 					javascript({ jsx: false, typescript: false }),
+					EditorView.lineWrapping,
 					keymap.of([
 						...completionKeymap,
 						{
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
index 69c30f5c477e..6718b2893e18 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -765,13 +765,11 @@ function QuerySearch(): JSX.Element {
 				theme={copilot}
 				onChange={handleChange}
 				onUpdate={handleUpdate}
-				autoFocus
-				placeholder="Enter your query (e.g., status = 'error' AND service = 'frontend')"
 				extensions={[
 					autocompletion({
 						override: [autoSuggestions],
 						defaultKeymap: true,
-						closeOnBlur: false,
+						closeOnBlur: true,
 						activateOnTyping: true,
 						maxRenderedOptions: 50,
 					}),
@@ -780,9 +778,11 @@ function QuerySearch(): JSX.Element {
 					stopEventsExtension,
 					disallowMultipleSpaces,
 				]}
+				placeholder="Enter your query (e.g., status = 'error' AND service = 'frontend')"
 				basicSetup={{
 					lineNumbers: false,
 				}}
+				autoFocus
 			/>
 
 			{query && (
@@ -864,7 +864,7 @@ function QuerySearch(): JSX.Element {
 				</Card>
 			)}
 
-			{queryContext && (
+			{/* {queryContext && (
 				<Card size="small" title="Current Context" className="query-context">
 					<div className="context-details">
 						<Space direction="vertical" size={4}>
@@ -904,7 +904,7 @@ function QuerySearch(): JSX.Element {
 						</Space>
 					</div>
 				</Card>
-			)}
+			)} */}
 		</div>
 	);
 }
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
index f2d22b8c10a3..75fc5089aef7 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
@@ -156,10 +156,10 @@ export const QueryV2 = memo(function QueryV2({
 							<QuerySearch />
 
 							{showSpanScopeSelector && (
-								<>
+								<div className="traces-search-filter-container">
 									<div className="traces-search-filter-in">in</div>
 									<SpanScopeSelector queryName={query.queryName} />
-								</>
+								</div>
 							)}
 						</div>
 					</div>
diff --git a/frontend/src/periscope.scss b/frontend/src/periscope.scss
index 8f38842b2718..4fbb7aee4b88 100644
--- a/frontend/src/periscope.scss
+++ b/frontend/src/periscope.scss
@@ -127,6 +127,8 @@
 
 		background: var(--bg-ink-300);
 
+		min-width: 0;
+
 		.ant-select {
 			border: none;
 			height: 36px;