fix(ui): fix high resolution header display bug

nervosnetwork · Jun 11, 2019 · ba76ccd · ba76ccd
1 parent f1fcb33
commit ba76ccd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/web/src/components/Header/index.tsx b/web/src/components/Header/index.tsx
@@ -22,8 +22,7 @@ const HeaderDiv = styled.div`
     padding: 1px ${(props: { width: number }) => (150 * props.width) / 1920}px;
   }
   .header__logo,
-  .header__menus,
-  .header__search {
+  .header__menus {
     display: flex;
     align-items: center;
   }
@@ -57,18 +56,18 @@ const HeaderDiv = styled.div`
   }
   .header__search {
     flex: 1;
+    display: flex;
+    align-items: center;
     justify-content: flex-end;
 
     @media (max-width: 700px) {
       flex: 1;
       justify-content: flex-start;
     }
 
-    display: flex;
     .header__search__component {
       display: flex;
       align-items: center;
-      justify-content: left;
       height: 50px;
       width: ${(props: { width: number }) => (550 * props.width) / 1920}px;
       min-width: 420px;

diff --git a/web/src/components/Search/index.tsx b/web/src/components/Search/index.tsx
@@ -9,7 +9,7 @@ import browserHistory from '../../routes/history'
 import SearchLogo from '../../asserts/search.png'
 
 const SearchPanel = styled.div`
-  max-width: 550px;
+  max-width: ${(props: { width: number }) => (550 * props.width) / 1920}px;
   margin: 0 auto;
   width: 100%;
   @media (max-width: 700px) {
@@ -119,7 +119,7 @@ const Search = ({ opacity = false, content }: { opacity?: boolean; content?: str
   const searchPlaceholder = 'Block / Transaction / Address'
 
   return (
-    <SearchPanel>
+    <SearchPanel width={window.innerWidth}>
       {
         <input
           id="home__search__bar"