From ead6885b29b71eaebbb7ea4b38ce955e6ca19653 Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Wed, 6 Apr 2022 11:33:56 +0530
Subject: [PATCH 1/3] bug: style-trace-search is fixed

---
 .../container/Trace/Search/AllTags/styles.ts  |  2 +-
 frontend/src/container/Trace/Search/index.tsx | 62 +++++++++----------
 frontend/src/container/Trace/Search/styles.ts |  1 +
 3 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/frontend/src/container/Trace/Search/AllTags/styles.ts b/frontend/src/container/Trace/Search/AllTags/styles.ts
index c43b32c5ea..1f8bc432ed 100644
--- a/frontend/src/container/Trace/Search/AllTags/styles.ts
+++ b/frontend/src/container/Trace/Search/AllTags/styles.ts
@@ -6,7 +6,7 @@ export const Container = styled(Card)`
 	min-height: 20vh;
 	width: 100%;
 	z-index: 2;
-	position: absolute;
+	position: absolute !important;
 
 	.ant-card-body {
 		padding-bottom: 0;
diff --git a/frontend/src/container/Trace/Search/index.tsx b/frontend/src/container/Trace/Search/index.tsx
index 1590fd74b2..abe96a889c 100644
--- a/frontend/src/container/Trace/Search/index.tsx
+++ b/frontend/src/container/Trace/Search/index.tsx
@@ -113,41 +113,39 @@ function Search({
 	};
 
 	return (
-		<Space direction="vertical" style={{ width: '100%' }}>
-			<Container ref={tagRef}>
-				<SearchComponent
-					onChange={(event): void => onChangeHandler(event.target.value)}
-					value={value}
-					allowClear
-					disabled={traces.filterLoading}
-					onFocus={onFocusHandler}
-					placeholder="Click to filter by tags"
-					type="search"
-					enterButton={<CaretRightFilled />}
-					onSearch={(string): void => {
-						if (string.length === 0) {
-							updateTagVisibility(false);
-							updateFilters([]);
-							return;
-						}
+		<Container ref={tagRef}>
+			<SearchComponent
+				onChange={(event): void => onChangeHandler(event.target.value)}
+				value={value}
+				allowClear
+				disabled={traces.filterLoading}
+				onFocus={onFocusHandler}
+				placeholder="Click to filter by tags"
+				type="search"
+				enterButton={<CaretRightFilled />}
+				onSearch={(string): void => {
+					if (string.length === 0) {
+						updateTagVisibility(false);
+						updateFilters([]);
+						return;
+					}
 
-						const { isError, payload } = parseQueryToTags(string);
+					const { isError, payload } = parseQueryToTags(string);
 
-						if (isError) {
-							updateTagIsError(true);
-						} else {
-							updateTagIsError(false);
-							updateTagVisibility(false);
-							updateFilters(payload);
-						}
-					}}
-				/>
+					if (isError) {
+						updateTagIsError(true);
+					} else {
+						updateTagIsError(false);
+						updateTagVisibility(false);
+						updateFilters(payload);
+					}
+				}}
+			/>
 
-				{traces.isTagModalOpen && (
-					<Tags updateFilters={updateFilters} onChangeHandler={onChangeHandler} />
-				)}
-			</Container>
-		</Space>
+			{traces.isTagModalOpen && (
+				<Tags updateFilters={updateFilters} onChangeHandler={onChangeHandler} />
+			)}
+		</Container>
 	);
 }
 
diff --git a/frontend/src/container/Trace/Search/styles.ts b/frontend/src/container/Trace/Search/styles.ts
index 9cbec7a213..5ade20596d 100644
--- a/frontend/src/container/Trace/Search/styles.ts
+++ b/frontend/src/container/Trace/Search/styles.ts
@@ -6,6 +6,7 @@ const { Search } = Input;
 export const Container = styled.div`
 	display: flex;
 	position: relative;
+	width: 100%;
 `;
 
 export const SearchComponent = styled(Search)`

From 7150971dc0650a9d58ebbc4e266fe1045b77d12f Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Wed, 6 Apr 2022 16:28:39 +0530
Subject: [PATCH 2/3] chore: style is updated

---
 .../container/Trace/Search/AllTags/index.tsx   | 18 ++++++++++--------
 .../container/Trace/Search/AllTags/styles.ts   | 14 +++++---------
 frontend/src/container/Trace/Search/index.tsx  |  1 -
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/frontend/src/container/Trace/Search/AllTags/index.tsx b/frontend/src/container/Trace/Search/AllTags/index.tsx
index 693f3c8451..fc132eafe8 100644
--- a/frontend/src/container/Trace/Search/AllTags/index.tsx
+++ b/frontend/src/container/Trace/Search/AllTags/index.tsx
@@ -116,14 +116,16 @@ function AllTags({
 			</Wrapper>
 
 			<ButtonContainer>
-				<Button onClick={onResetHandler}>Reset</Button>
-				<Button
-					type="primary"
-					onClick={onRunQueryHandler}
-					icon={<CaretRightFilled />}
-				>
-					Run Query
-				</Button>
+				<Space align="start">
+					<Button onClick={onResetHandler}>Reset</Button>
+					<Button
+						type="primary"
+						onClick={onRunQueryHandler}
+						icon={<CaretRightFilled />}
+					>
+						Run Query
+					</Button>
+				</Space>
 			</ButtonContainer>
 		</Container>
 	);
diff --git a/frontend/src/container/Trace/Search/AllTags/styles.ts b/frontend/src/container/Trace/Search/AllTags/styles.ts
index 1f8bc432ed..3ce74315e1 100644
--- a/frontend/src/container/Trace/Search/AllTags/styles.ts
+++ b/frontend/src/container/Trace/Search/AllTags/styles.ts
@@ -35,20 +35,16 @@ export const Wrapper = styled.div`
 	}
 `;
 
-export const ButtonContainer = styled.div`
+export const ButtonContainer = styled(Card)`
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
-	background-color: #303030;
-	padding-top: 11px;
-	padding-bottom: 11px;
-	padding-right: 38.01px;
 
-	margin-top: 1rem;
+	padding-top: 11px !important;
+	padding-bottom: 11px !important;
+	padding-right: 38.01px !important;
 
-	> button:nth-child(1) {
-		margin-right: 1rem;
-	}
+	margin-top: 1rem !important;
 `;
 
 export const CurrentTagsContainer = styled.div`
diff --git a/frontend/src/container/Trace/Search/index.tsx b/frontend/src/container/Trace/Search/index.tsx
index abe96a889c..776a36efaf 100644
--- a/frontend/src/container/Trace/Search/index.tsx
+++ b/frontend/src/container/Trace/Search/index.tsx
@@ -1,5 +1,4 @@
 import { CaretRightFilled } from '@ant-design/icons';
-import { Space } from 'antd';
 import useClickOutside from 'hooks/useClickOutside';
 import React, { useEffect, useRef, useState } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';

From e864e33ad3cc584c9edac8bc995b897ddd87f5ac Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Wed, 6 Apr 2022 22:01:42 +0530
Subject: [PATCH 3/3] bug: value is updated on selection

---
 frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx
index 378001bec4..d58675ffad 100644
--- a/frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx
+++ b/frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx
@@ -32,6 +32,7 @@ function TagValue(props: TagValueProps): JSX.Element {
 
 	return (
 		<SelectComponent
+			value={selectedValues[0]}
 			onSelect={(value: unknown): void => {
 				if (typeof value === 'string') {
 					setLocalSelectedTags((tags) => [