From 586e5a3db8b6dd7e567a845e103ae94c9a85e6b7 Mon Sep 17 00:00:00 2001
From: j433866 <j433866@gmail.com>
Date: Thu, 30 May 2019 14:08:02 +0100
Subject: [PATCH] Further improvements to tab search UI

---
 src/web/html/index.html            | 10 +++++-----
 src/web/stylesheets/layout/_io.css | 25 +++++++++++--------------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index 3f65f484..bf2a4bef 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -789,10 +789,6 @@
                                     </label>
                                 </li>
                             </ul>
-                            <div class="form-group input-find-option" id="input-num-results-container">
-                                <label for="input-num-results" class="bmd-label-floating">Number of results</label>
-                                <input type="number" class="form-control" id="input-num-results" value="20" min="1">
-                            </div>
                         </div>
                         <div class="form-group input-group">
                             <div class="toggle-string">
@@ -807,7 +803,11 @@
                                 </div>
                             </div>
                         </div>
-                        <br>
+                        <div class="form-group input-find-option" id="input-num-results-container">
+                            <label for="input-num-results" class="bmd-label-floating">Number of results</label>
+                            <input type="number" class="form-control" id="input-num-results" value="20" min="1">
+                        </div>
+                        <div style="clear:both"></div>
                         <h6>Results</h6>
                         <ul id="input-search-results"></ul>
                     </div>
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 1c6ca399..5e9364ae 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -303,10 +303,10 @@
     width: 100%;
 }
 
-.form-group.input-find-option {
-    width: 80%;
-    margin-left: auto;
-    margin-right: auto;
+.form-group.input-group {
+    width: 70%;
+    float: left;
+    margin-bottom: 2rem;
 }
 
 .input-find-option .toggle-string {
@@ -324,17 +324,12 @@
     filter: brightness(97%);
 }
 
-#input-num-results-container {
-    width: 20%;
-    float: right;
-    margin: 0;
-}
-
 .form-group.output-find-option {
     width: 70%;
     float: left;
 }
 
+#input-num-results-container,
 #output-num-results-container {
     width: 20%;
     float: right;
@@ -345,9 +340,12 @@
 #input-find-options-checkboxes,
 #output-find-options-checkboxes {
     list-style: none;
-    width: 70%;
-    margin-top: auto;
-    margin-bottom: auto;
+    padding: 0;
+    margin: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
+    text-align: center;
+    width: fit-content;
 }
 
 #input-find-options-checkboxes li,
@@ -356,7 +354,6 @@
     flex-direction: row;
     float: left;
     padding: 10px;
-    width: auto;
     text-align: center;
 }