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,31 +15,33 @@
         </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;">
-        <form action="" method="GET">
-          <div class="input-group">
-            {{ search_form.s }}
-            <div class="input-group-btn">
-              {{ search_form.stype }}
-              <button type="submit" class="btn btn-primary input-tags"> 
-                <i class="fa fa-search"></i>
-              </button>
-            </div>
-          </div>
-        </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 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 }}
+                <div class="input-group-btn">
+                  {{ search_form.stype }}
+                  <button type="submit" class="btn btn-primary input-tags"> 
+                    <i class="fa fa-search"></i>
+                  </button>
+                </div>
+              </div><!-- .input-group -->
+            </form>
+          </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">