feat: ui improvements

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;
 		}

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 }),

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;
 	}
 }

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;

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,
 						{

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>
 	);
 }

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>

frontend/src/periscope.scss

@@ -127,6 +127,8 @@
 
 		background: var(--bg-ink-300);
 
+		min-width: 0;
+
 		.ant-select {
 			border: none;
 			height: 36px;