Make search/filter bars use full width of the container, simplify js code

skins/elastic/styles/widgets/searchbar.less

@@ -14,7 +14,6 @@
 .searchbar {
     position: absolute;
     background-color: @color-layout-header-background;
-    z-index: 10;
     right: 0;
     height: @layout-header-height;
     display: block !important;
@@ -22,6 +21,7 @@
     a.button {
         min-width: auto;
         padding: 0 .5rem;
+        display: block;
 
         &:before {
             line-height: @layout-header-height;
@@ -39,6 +39,10 @@
         font-size: 80%;
     }
 
+    form {
+        display: none;
+    }
+
     a.icon {
         &:before {
             &:extend(.font-icon-class);
@@ -56,6 +60,25 @@
     &.active a.button.search {
         color: @color-searchbar-icon-active;
     }
+
+    &.open {
+        z-index: 10;
+        left: 0 !important;
+        right: 0 !important;
+
+        .input-group {
+            display: flex;
+        }
+
+        form {
+            display: flex;
+        }
+
+        a.button.filter,
+        a.button.search {
+            display: none;
+        }
+    }
 }
 
 .searchfilterbar {

skins/elastic/ui.js

@@ -1375,10 +1375,9 @@ function rcube_elastic_ui()
                 if (button.is(':visible')) {
                     return;
                 }
-                form.hide();
-                // width:auto fixes search button position in Chrome
-                $(bar).css('left', 'auto')[is_search_pending() ? 'addClass' : 'removeClass']('active');
-                button.css('display', 'block');
+
+                $(bar).removeClass('open')[is_search_pending() ? 'addClass' : 'removeClass']('active');
+
                 if (focus && rcube_event.is_keyboard(event)) {
                     button.focus();
                 }
@@ -1403,9 +1402,7 @@ function rcube_elastic_ui()
 
         // Display search form
         button.on('click', function() {
-            $(bar).css('left', 0);
-            form.css('display', 'flex');
-            button.hide();
+            $(bar).addClass('open');
             input.focus();
         });
 
@@ -1463,9 +1460,9 @@ function rcube_elastic_ui()
                 if (button.is(':visible')) {
                     return;
                 }
-                form.hide();
-                bar.css('left', 'auto')[is_filter_enabled() ? 'addClass' : 'removeClass']('active');
-                button.css('display', 'block');
+
+                bar.removeClass('open')[is_filter_enabled() ? 'addClass' : 'removeClass']('active');
+
                 if (focus && rcube_event.is_keyboard(event)) {
                     button.focus();
                 }
@@ -1488,9 +1485,7 @@ function rcube_elastic_ui()
 
         // Display filter selection (with animation effect)
         button.on('click', function() {
-            $(bar).css('left', 0);
-            form.css('display', 'flex');
-            button.hide();
+            bar.addClass('open');
             select.focus();
         });