reduce width of searchbox on mobile, fix overlap, fix #7282

core/css/mobile.css

@@ -0,0 +1,20 @@
+@media only screen and (max-width: 600px) {
+
+/* compress search box on mobile, expand when focused */
+.searchbox input[type="search"] {
+	width: 17%;
+	-webkit-transition: width 100ms;
+	-moz-transition: width 100ms;
+	-o-transition: width 100ms;
+	transition: width 100ms;
+}
+.searchbox input[type="search"]:focus,
+.searchbox input[type="search"]:active {
+	width: 155px;
+	-webkit-transition: width 100ms;
+	-moz-transition: width 100ms;
+	-o-transition: width 100ms;
+	transition: width 100ms;
+}
+
+}

core/css/styles.css

@@ -205,17 +205,19 @@ textarea:disabled {
 		color: #bbb;
 	}
 
-
+/* Searchbox */
 .searchbox input[type="search"] {
+	position: relative;
 	font-size: 1.2em;
-	padding: .2em .5em .2em 1.5em;
+	padding-left: 1.5em;
 	background: #fff url('../img/actions/search.svg') no-repeat .5em center;
 	border: 0;
-	border-radius: 1em;
+	border-radius: 2em;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity: .7;
-	margin-top: 10px;
+	margin-top: 6px;
 	float: right;
 }
+
 input[type="submit"].enabled {
 	background: #66f866;
 	border: 1px solid #5e5;

lib/base.php

@@ -332,6 +332,7 @@ class OC {
 		}
 
 		OC_Util::addStyle("styles");
+		OC_Util::addStyle("mobile");
 		OC_Util::addStyle("icons");
 		OC_Util::addStyle("apps");
 		OC_Util::addStyle("fixes");