styles for header-search on vault view folder page

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"

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;
         }
     }
 }