From 98abc4ec8ea717f6102a771aedc82c99926a8f36 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 8 Dec 2016 21:22:17 -0500
Subject: [PATCH] styles for header-search on vault view folder page

---
 .../app/vault/views/vaultViewFolder.html      |  8 +++----
 src/popup/less/components.less                | 22 +++++++++++++++----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/popup/app/vault/views/vaultViewFolder.html b/src/popup/app/vault/views/vaultViewFolder.html
index 3c7c8f7855..b255feafd9 100644
--- a/src/popup/app/vault/views/vaultViewFolder.html
+++ b/src/popup/app/vault/views/vaultViewFolder.html
@@ -1,14 +1,14 @@
-<div class="header">
+<div class="header header-search">
     <div class="left">
         <a ui-sref="tabs.vault({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> {{i18n.myVault}}</a>
     </div>
-    <div class="right">
-        <a href="" ng-click="addSite()"><i class="fa fa-plus fa-lg"></i></a>
-    </div>
     <div class="search">
         <input type="search" placeholder="{{i18n.searchFolder}}" ng-model="searchText" ng-change="searchSites()" id="search" />
         <i class="fa fa-search"></i>
     </div>
+    <div class="right">
+        <a href="" ng-click="addSite()"><i class="fa fa-plus fa-lg"></i></a>
+    </div>
 </div>
 <div class="content">
     <div ng-if="vaultSites.length" infinite-scroll="loadMore()" infinite-scroll-distance="1" infinite-scroll-parent="true"
diff --git a/src/popup/less/components.less b/src/popup/less/components.less
index a895cc40e8..17947142e6 100644
--- a/src/popup/less/components.less
+++ b/src/popup/less/components.less
@@ -12,7 +12,6 @@
     left: 0;
     right: 0;
     overflow: hidden;
-    position: relative;
 
     a, button {
         color: white !important;
@@ -42,6 +41,7 @@
         display: block;
         position: absolute;
         left: 0;
+        text-align: left;
 
         a, button {
             padding: 12px 10px;
@@ -104,11 +104,25 @@
         }
     }
 
-    .left ~ .right ~ .search {
-        margin-left: 92px;
+    &.header-search {
+        .left, .right, .search {
+            display: table-cell;
+            position: relative;
+        }
 
         input {
-            width: 77%;
+            width: 100%;
+            margin: 0;
+            float: none;
+        }
+
+        .search {
+            padding: 0 7px;
+        }
+
+        a {
+            white-space: nowrap;
+            float: none;
         }
     }
 }