#336 taskbar is now responsive

static/server/taskbar.css

@@ -5,7 +5,10 @@
     right:0;
     top: 0;
     z-index:100;
-    max-height: 2.8em;
+}
+
+.height_separator {
+    height: 3em;
 }
 
 #kiwixsearchbox {
@@ -14,7 +17,7 @@
 
 .kiwixsearch {
 	float: right;
-}s
+}
 
 /* Try to fix buggy stuff in jquery-ui autocomplete */
 #ui-id-1, .ui-autocomplete {
@@ -37,14 +40,22 @@ li.ui-state-focus {
 	text-decoration: underline;
 }
 
-@media only screen and (min--moz-device-pixel-ratio: 1.5),
-only screen and (-o-min-device-pixel-ratio: 1.5/1),
-only screen and (-webkit-min-device-pixel-ratio: 1.5),
-only screen and (min-device-pixel-ratio: 1.5) {
-    #kiwixtoolbar button, #kiwixtoolbar input {
-    	font-size: 2em;
+/* the breakpoint "600px" is the width of the 3 btns "library", "home" and "randoml" */
+@media (max-width: 600px) {
+    .kiwixsearch {
+        float: none;
+        margin-top: 5px;
     }
+
     #kiwixsearchbox {
-		width: 7em;
-	}
+        width: calc(100% - 75px);
+    }
+
+    #kiwixsearchform input[type="submit"] {
+        width: 70px;
+    }
+
+    .height_separator {
+        height: 6em;
+    }
 }

static/server/taskbar.html.part

@@ -12,4 +12,4 @@
   	</form>
   </span>
 </span>
-<div style="display: block; height: 3em;"></div>
+<div class='height_separator'></div>