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 ( { if (typeof value === 'string') { setLocalSelectedTags((tags) => [ 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({ - - + + + + ); diff --git a/frontend/src/container/Trace/Search/AllTags/styles.ts b/frontend/src/container/Trace/Search/AllTags/styles.ts index c43b32c5ea..3ce74315e1 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; @@ -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 1590fd74b2..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'; @@ -113,41 +112,39 @@ function Search({ }; return ( - - - onChangeHandler(event.target.value)} - value={value} - allowClear - disabled={traces.filterLoading} - onFocus={onFocusHandler} - placeholder="Click to filter by tags" - type="search" - enterButton={} - onSearch={(string): void => { - if (string.length === 0) { - updateTagVisibility(false); - updateFilters([]); - return; - } + + onChangeHandler(event.target.value)} + value={value} + allowClear + disabled={traces.filterLoading} + onFocus={onFocusHandler} + placeholder="Click to filter by tags" + type="search" + enterButton={} + 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 && ( - - )} - - + {traces.isTagModalOpen && ( + + )} + ); } 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)`