From ba76ccd82391c04211c03bc8845b60e8e5d54122 Mon Sep 17 00:00:00 2001
From: duanyytop <duanyytop@gmail.com>
Date: Mon, 10 Jun 2019 15:52:10 +0800
Subject: [PATCH] fix(ui): fix high resolution header display bug

---
 web/src/components/Header/index.tsx | 7 +++----
 web/src/components/Search/index.tsx | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/web/src/components/Header/index.tsx b/web/src/components/Header/index.tsx
index b2050f092..c71e1e01a 100644
--- 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,6 +56,8 @@ const HeaderDiv = styled.div`
   }
   .header__search {
     flex: 1;
+    display: flex;
+    align-items: center;
     justify-content: flex-end;
 
     @media (max-width: 700px) {
@@ -64,11 +65,9 @@ const HeaderDiv = styled.div`
       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
index 3fac27e30..758c6e526 100644
--- 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"