Make sure there is room for the sort icons when search results are there, refs #515

src/Packagist/WebBundle/Resources/public/css/main.css

@@ -808,6 +808,9 @@ ul.packages .metadata-block:last-child {
   position: relative;
   top: 2px;
   margin-left: -12px;
+  padding-right: 0;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .sortable .order-by-group .icon:first-child {

src/Packagist/WebBundle/Resources/public/js/search.js

@@ -21,6 +21,7 @@
         $('.order-by-group').attr('href', function (index, current) {
             return current.replace(/q=.*?&/, 'q=' + encodeURIComponent($('input[type="search"]', form).val()) + '&')
         });
+        $('.js-search-field-wrapper').removeClass('col-xs-12').addClass('col-xs-8');
         $('#order-bys-wrapper').removeClass('hidden');
 
         searching = false;

src/Packagist/WebBundle/Resources/views/Web/searchForm.html.twig

@@ -1,7 +1,7 @@
 <form id="search-form" action="{{ path('search.ajax') }}" method="GET" {{ form_enctype(searchForm) }} autocomplete="off">
     <div class="{% if orderBys is defined %}sortable{% endif %} row">
         <div class="hidden">{{ form_errors(searchForm.query) }}</div>
-        <div class="col-xs-12 col-sm-9">
+        <div class="{% if searchForm.vars.value.query is empty %}col-xs-12{% else %}col-xs-8{% endif %} js-search-field-wrapper col-sm-9">
             {{ form_widget(searchForm.query, {'attr': {'autocomplete': 'off', 'autofocus': 'autofocus', 'placeholder': 'Search packages...', 'tabindex': 1}}) }}
         </div>