From 3f72ae7448a2df27568a37238b7afb6bef1646a1 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 09:03:16 -0600
Subject: [PATCH] Move sort select under filters & match styles

---
 manage.html       | 20 +++++++++---------
 manage/manage.css | 54 +++++++++++++++++++----------------------------
 2 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/manage.html b/manage.html
index 129f01d6..214859a1 100644
--- a/manage.html
+++ b/manage.html
@@ -248,6 +248,16 @@
     </div>
   </details>
 
+  <div id="sort-wrapper" i18n-title="sortLabel">
+    <div class="sorter-selection">
+      <select id="sort-select"></select>
+      <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+    </div>
+    <a href="#" id="sorter-help">
+      <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+    </a>
+  </div>
+
   <p class="nowrap">
     <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
     <a href="#" id="update-history" i18n-title="genericHistoryLabel">
@@ -315,16 +325,6 @@
      <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
 
-    <div id="sort-wrapper" i18n-title="sortLabel">
-      <div class="sorter-selection">
-        <select id="sort-select"></select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-        <a href="#" id="sorter-help">
-          <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-        </a>
-      </div>
-    </div>
-
     <p>
       <button id="manage-options-button" i18n-text="openOptionsManage"></button>
       <button id="manage-shortcuts-button" class="chromium-only"
diff --git a/manage/manage.css b/manage/manage.css
index 141f690a..5ebcde9c 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -423,34 +423,6 @@ select {
   margin: 0 .5em;
 }
 
-#sort-wrapper {
-  margin: 5px 0;
-}
-
-#sort-wrapper .sorter-selection {
-  position: relative;
-  display: block;
-  left: 0;
-  margin-bottom: 4px;
-  max-width: calc(100% - 18px);
-}
-
-#sort-select {
-  color: inherit;
-  max-width: 100%;
-}
-
-#sort-wrapper .select-arrow {
-  top: 3px;
-  right: 3px;
-}
-
-#sorter-help {
-  position: absolute;
-  right: -22px;
-  top: 3px;
-}
-
 .newUI .entry .svg-icon.checked,
 .newUI .entry:hover .svg-icon.checked {
   fill: #000;
@@ -864,13 +836,23 @@ input[id^="manage.newUI"] {
   display: none;
 }
 
-#search-wrapper {
+#search-wrapper, #sort-wrapper {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }
 
-#search {
+#sort-wrapper {
+  margin-top: .25em;
+}
+
+#sort-wrapper .sorter-selection {
+  position: relative;
+  max-width: calc(100% - 15px);
+}
+
+#search, #sort-select {
+  max-width: 100%;
   flex-grow: 1;
   margin: 0.25rem 0 0;
   background: #fff;
@@ -880,13 +862,21 @@ input[id^="manage.newUI"] {
   font: 400 12px Arial;
   color: #000;
   border: 1px solid hsl(0, 0%, 66%);
-  border-radius: 0.25rem;
 }
 
-#search-help {
+#sort-select {
+  padding-right: 18px;
+}
+
+#search-help, #sorter-help {
   margin: 4px -5px 0 2px;
 }
 
+#sort-wrapper .select-arrow {
+  top: 7px;
+  right: 4px;
+}
+
 #message-box.help-text > div {
   max-width: 26rem;
 }