From 8f009906f194eb7b93a72f20f4d1cd2c2f212762 Mon Sep 17 00:00:00 2001
From: Brian <brianwebtek@gmail.com>
Date: Wed, 7 Jul 2021 20:26:18 +0800
Subject: [PATCH 1/2] fix(react): update searchbar width issue in small screen

---
 datahub-web-react/src/app/home/HomePageHeader.tsx |  1 +
 datahub-web-react/src/app/search/SearchBar.tsx    | 13 ++++++++++---
 datahub-web-react/src/app/search/SearchHeader.tsx |  1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/datahub-web-react/src/app/home/HomePageHeader.tsx b/datahub-web-react/src/app/home/HomePageHeader.tsx
index 102453f0cc01d0..526c7b15001a5c 100644
--- a/datahub-web-react/src/app/home/HomePageHeader.tsx
+++ b/datahub-web-react/src/app/home/HomePageHeader.tsx
@@ -65,6 +65,7 @@ const HeaderContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
 `;
 
 const NavGroup = styled.div`
diff --git a/datahub-web-react/src/app/search/SearchBar.tsx b/datahub-web-react/src/app/search/SearchBar.tsx
index ac8f1858845a5b..1512162bd4f35f 100644
--- a/datahub-web-react/src/app/search/SearchBar.tsx
+++ b/datahub-web-react/src/app/search/SearchBar.tsx
@@ -24,7 +24,14 @@ const ExploreForEntity = styled.span`
 `;
 
 const StyledAutoComplete = styled(AutoComplete)`
-    width: 650px;
+    width: 100%;
+    max-width: 650px;
+`;
+
+const AutoCompleteContainer = styled.div`
+    width: 100%;
+    text-align: center;
+    padding: 0 30px;
 `;
 
 const renderItem = (suggestion: string, icon: JSX.Element, type: string) => ({
@@ -90,7 +97,7 @@ export const SearchBar = ({
     }));
 
     return (
-        <div style={style}>
+        <AutoCompleteContainer style={style}>
             <StyledAutoComplete
                 style={autoCompleteStyle}
                 options={options}
@@ -109,7 +116,7 @@ export const SearchBar = ({
                     data-testid="search-input"
                 />
             </StyledAutoComplete>
-        </div>
+        </AutoCompleteContainer>
     );
 };
 
diff --git a/datahub-web-react/src/app/search/SearchHeader.tsx b/datahub-web-react/src/app/search/SearchHeader.tsx
index c82fe9228d4143..0d94631b291aad 100644
--- a/datahub-web-react/src/app/search/SearchHeader.tsx
+++ b/datahub-web-react/src/app/search/SearchHeader.tsx
@@ -53,6 +53,7 @@ const NavGroup = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: 200px;
 `;
 
 /**

From f0045dea1d28a0a51ce8807326e0ac107c0c2956 Mon Sep 17 00:00:00 2001
From: Brian <brianwebtek@gmail.com>
Date: Wed, 7 Jul 2021 20:45:09 +0800
Subject: [PATCH 2/2] fix(react): fix searchbar width

---
 datahub-web-react/src/app/search/SearchBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datahub-web-react/src/app/search/SearchBar.tsx b/datahub-web-react/src/app/search/SearchBar.tsx
index 1512162bd4f35f..3c429f060dd716 100644
--- a/datahub-web-react/src/app/search/SearchBar.tsx
+++ b/datahub-web-react/src/app/search/SearchBar.tsx
@@ -25,7 +25,7 @@ const ExploreForEntity = styled.span`
 
 const StyledAutoComplete = styled(AutoComplete)`
     width: 100%;
-    max-width: 650px;
+    max-width: 800px;
 `;
 
 const AutoCompleteContainer = styled.div`