diff --git a/datahub-web-react/src/app/searchV2/SearchBar.tsx b/datahub-web-react/src/app/searchV2/SearchBar.tsx
index 8f7ffb5d10d7a2..ef121691de32d7 100644
--- a/datahub-web-react/src/app/searchV2/SearchBar.tsx
+++ b/datahub-web-react/src/app/searchV2/SearchBar.tsx
@@ -31,7 +31,7 @@ import { useAppConfig, useIsShowSeparateSiblingsEnabled } from '../useAppConfig'
const StyledAutoComplete = styled(AutoComplete)<{ $isShowNavBarRedesign?: boolean }>`
width: 100%;
- max-width: ${(props) => (props.$isShowNavBarRedesign ? '423px' : '540px')};
+ max-width: ${(props) => (props.$isShowNavBarRedesign ? '632px' : '540px')};
`;
const SkeletonContainer = styled.div`
@@ -466,7 +466,7 @@ export const SearchBar = ({
maxHeight: 1000,
overflowY: 'visible',
position: (fixAutoComplete && 'fixed') || 'relative',
- ...(isShowNavBarRedesign ? { minWidth: '435px' } : {}),
+ ...(isShowNavBarRedesign ? { minWidth: '648px' } : {}),
}}
onDropdownVisibleChange={(isOpen) => {
if (!isOpen) {
diff --git a/datahub-web-react/src/app/searchV2/SearchHeader.tsx b/datahub-web-react/src/app/searchV2/SearchHeader.tsx
index 6b23037a71aef9..01e4a0ffd488d4 100644
--- a/datahub-web-react/src/app/searchV2/SearchHeader.tsx
+++ b/datahub-web-react/src/app/searchV2/SearchHeader.tsx
@@ -27,7 +27,7 @@ const getStyles = ($isShowNavBarRedesign?: boolean) => {
padding: 0,
display: 'flex',
justifyContent: 'center',
- width: $isShowNavBarRedesign ? '439px' : '620px',
+ width: $isShowNavBarRedesign ? '648px' : '620px',
minWidth: '400px',
},
};
@@ -48,17 +48,25 @@ const Header = styled(Layout)<{ $isNavBarCollapsed?: boolean; $isShowNavBarRedes
background-color: transparent;
height: ${(props) => (props.$isShowNavBarRedesign ? '56px' : '72px')};
display: flex;
- ${(props) => {
- if (!props.$isShowNavBarRedesign) return '';
- return `padding-left: ${props.$isNavBarCollapsed ? '68px;' : '270px'};`;
- }}
${(props) =>
props.$isShowNavBarRedesign &&
`
margin-top: 8px;
gap: 16px;
flex-direction: row;
- transition: padding 250ms ease-in-out;
+
+ // preventing of NavBar's overlapping
+ position: relative;
+ padding-left: ${props.$isNavBarCollapsed ? '224px' : '540px'};
+ left: ${props.$isNavBarCollapsed ? '-112px' : '-270px'};
+ transition: none;
+ @media only screen and (min-width: 1280px) {
+ padding-left: 540px;
+ left: -270px;
+ }
+ @media only screen and (max-width: 1200px) {
+ transition: padding 250ms ease-in-out;
+ }
`}
${(props) => props.$isShowNavBarRedesign && !props.$isNavBarCollapsed && 'justify-content: space-between;'}
align-items: center;
@@ -76,10 +84,10 @@ const SearchBarContainer = styled.div<{ $isShowNavBarRedesign?: boolean }>`
display: flex;
flex: 1;
align-items: center;
+ justify-content: center;
${(props) =>
!props.$isShowNavBarRedesign &&
`
- justify-content: center;
margin-left: 80px;
margin-top: 6px;
`}
@@ -106,6 +114,11 @@ const StyledButton = styled(Button)`
}
`;
+const NavBarTogglerWrapper = styled.div`
+ position: fixed;
+ left: 68px;
+`;
+
type Props = {
initialQuery: string;
placeholderText: string;
@@ -140,7 +153,11 @@ export const SearchHeader = ({
- {isShowNavBarRedesign && isCollapsed && }
+ {isShowNavBarRedesign && isCollapsed && (
+
+
+
+ )}