dashboard: better look for vm list controls on smaller resolution

circle/dashboard/static/dashboard/dashboard.css

@@ -936,3 +936,7 @@ textarea[name="list-new-namelist"] {
 .mass-op-panel .status-icon {
   font-size: 1.5em;
 }
+
+#vm-list-search, #vm-mass-ops {
+  margin-top: 8px;
+}

circle/dashboard/templates/dashboard/vm-list.html

@@ -15,7 +15,19 @@
         </div>
         <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Virtual machines" %}</h3>
       </div>
-      <div class="pull-right" style="max-width: 300px; margin-top: 15px; margin-right: 15px;">
+      <div class="panel-body">
+        <div class="row">
+          <div class="col-md-8 vm-list-group-control" id="vm-mass-ops">
+            <strong>{% trans "Group actions" %}</strong>
+            <button id="vm-list-group-select-all" class="btn btn-info btn-xs">{% trans "Select all" %}</button>
+            {% for o in ops %}
+              <a href="{{ o.get_url }}" class="btn btn-xs btn-{{ o.effect }} mass-operation" 
+               title="{{ o.name|capfirst }}" disabled>
+                <i class="fa fa-{{ o.icon }}"></i>
+              </a>
+            {% endfor %}
+          </div><!-- .vm-list-group-control -->
+          <div class="col-md-4" id="vm-list-search">
             <form action="" method="GET">
               <div class="input-group">
                 {{ search_form.s }}
@@ -25,21 +37,11 @@
                     <i class="fa fa-search"></i>
                   </button>
                 </div>
-          </div>
+              </div><!-- .input-group -->
             </form>
-      </div>
-      <div class="panel-body vm-list-group-control">
-        <div id="vm-mass-ops">
-          <strong>{% trans "Group actions" %}</strong>
-          <button id="vm-list-group-select-all" class="btn btn-info btn-xs">{% trans "Select all" %}</button>
-          {% for o in ops %}
-            <a href="{{ o.get_url }}" class="btn btn-xs btn-{{ o.effect }} mass-operation" 
-             title="{{ o.name|capfirst }}" disabled>
-              <i class="fa fa-{{ o.icon }}"></i>
-            </a>
-          {% endfor %}
-        </div><!-- #vm-mass-ops -->
-      </div><!-- .panel-body .vm-list-group-control -->
+          </div><!-- .col-md-4 #vm-list-search -->
+        </div><!-- .row -->
+      </div><!-- .panel-body -->
       <div class="panel-body">
         <table class="table table-bordered table-striped table-hover vm-list-table"
          id="vm-list-table">