From 4c5ac4fc338f22947b00b5fff4a446311b4e886d Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 5 Aug 2016 19:29:59 +0200
Subject: [PATCH] Fixes search icon position on chrome

* simplify search icon and label markup

Fixes #1715
---
 client/app/scripts/components/search.js | 10 ++--
 client/app/styles/main.less             | 61 +++++++++++++------------
 2 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/client/app/scripts/components/search.js b/client/app/scripts/components/search.js
index 279aedff0..8671e3e92 100644
--- a/client/app/scripts/components/search.js
+++ b/client/app/scripts/components/search.js
@@ -116,10 +116,6 @@ class Search extends React.Component {
       <div className="search-wrapper">
         <div className={classNames} title={title}>
           <div className="search-input">
-            <i className="fa fa-search search-input-icon"></i>
-            <label className="search-input-label" htmlFor={inputId}>
-              Search
-            </label>
             {showPinnedSearches && pinnedSearches.toIndexedSeq()
               .map(query => <SearchItem query={query} key={query} />)}
             <input className="search-input-field" type="text" id={inputId}
@@ -127,6 +123,12 @@ class Search extends React.Component {
               onFocus={this.handleFocus} onBlur={this.handleBlur}
               disabled={disabled} ref="queryInput" />
           </div>
+          <div className="search-label">
+            <i className="fa fa-search search-label-icon"></i>
+            <label className="search-label-hint" htmlFor={inputId}>
+              Search
+            </label>
+          </div>
           {!showPinnedSearches && <div className="search-hint">
             {getHint(nodes)}
           </div>}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 91648e535..cab55b311 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -1313,6 +1313,28 @@ h2 {
     text-align: left;
   }
 
+  &-label {
+    position: absolute;
+    pointer-events: none;
+    user-select: none;
+    top: 0;
+    left: 4px;
+    z-index: 1024;
+    padding: 4px;
+    color: @text-secondary-color;
+
+    &-icon {
+      margin-right: 0.5em;
+    }
+
+    &-hint {
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      transition: opacity 0.3s 0.5s @base-ease;
+      opacity: 1;
+    }
+  }
+
   &-input {
     overflow: hidden;
     background: #fff;
@@ -1330,7 +1352,7 @@ h2 {
       font-size: 0.8rem;
       line-height: 150%;
       position: relative;
-      padding: 1px 4px 1px 0.75em;
+      padding: 1px 4px 1px 1.5em;
       border: none;
       border-radius: 0;
       background: transparent;
@@ -1341,36 +1363,11 @@ h2 {
         outline: none;
       }
     }
-
-    &-icon {
-      position: relative;
-      width: 1.285em;
-      text-align: center;
-      color: @text-secondary-color;
-      position: relative;
-      top: 2px;
-      left: 4px;
-      padding: 2px;
-    }
-
-    &-label {
-      user-select: none;
-      display: inline-block;
-      padding: 2px 0.75em;
-      font-size: 0.8rem;
-      position: absolute;
-      text-align: left;
-      pointer-events: none;
-      color: @text-secondary-color;
-      text-transform: uppercase;
-      transition: opacity 0.3s 0.5s @base-ease;
-      opacity: 1;
-    }
   }
 
-  &-focused &-input-label,
-  &-pinned &-input-label,
-  &-filled &-input-label {
+  &-focused &-label-hint,
+  &-pinned &-label-hint,
+  &-filled &-label-hint {
     transition: opacity 0.1s 0s @base-ease;
     opacity: 0;
   }
@@ -1404,13 +1401,17 @@ h2 {
 .search-item {
   background-color: fade(@weave-blue, 20%);
   border-radius: @border-radius / 2;
-  margin: 1px 0 1px 8px;
+  margin: 1px 0 1px 1.5em;
   display: inline-block;
 
   & + .search-item {
     margin-left: 4px;
   }
 
+  & + .search-input-field {
+    padding-left: 4px;
+  }
+
   &-label {
     padding: 2px 4px;
   }