fix(react): fix searchbar width issue in small screen (#2856)

datahub-project · Jul 9, 2021 · 0e36df4 · 0e36df4
1 parent 5cbbebe
commit 0e36df4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -24,7 +24,14 @@ const ExploreForEntity = styled.span`
 `;
 
 const StyledAutoComplete = styled(AutoComplete)`
-    width: 650px;
+    width: 100%;
+    max-width: 800px;
+`;
+
+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
@@ -53,6 +53,7 @@ const NavGroup = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: 200px;
 `;
 
 /**