Fix layout issues for "object-helper" element

thanks flexbox!

tailbone/static/css/forms.css

@@ -8,23 +8,6 @@ div.form-wrapper {
 }
 
 
-/******************************
- * "object helper" panel
- ******************************/
-
-.object-helper {
-    border: 1px solid black;
-    float: right;
-    margin-top: 1em;
-    padding: 1em;
-    width: 20em;
-}
-
-.object-helper-content {
-    margin-top: 1em;
-}
-
-
 /******************************
  * Forms
  ******************************/

tailbone/static/css/layout.css

@@ -151,6 +151,20 @@ body > #body-wrapper {
     white-space: nowrap;
 }
 
+/******************************
+ * "object helper" panel
+ ******************************/
+
+.object-helper {
+    border: 1px solid black;
+    margin: 1em;
+    padding: 1em;
+    width: 20em;
+}
+
+.object-helper-content {
+    margin-top: 1em;
+}
 
 /******************************
  * Panels

tailbone/static/themes/bobcat/css/layout.css

@@ -124,6 +124,20 @@ header .level .theme-picker {
     white-space: nowrap;
 }
 
+/******************************
+ * "object helper" panel
+ ******************************/
+
+.object-helper {
+    border: 1px solid black;
+    margin: 1em;
+    padding: 1em;
+    width: 20em;
+}
+
+.object-helper-content {
+    margin-top: 1em;
+}
 
 /* /\****************************** */
 /*  * Panels */

tailbone/templates/batch/view.mako

@@ -75,11 +75,15 @@
   % endif
 </%def>
 
-<ul id="context-menu">
+<div style="display: flex; justify-content: space-between;">
-  ${self.context_menu_items()}
-</ul>
 
-% if status_breakdown is not Undefined and status_breakdown is not None:
+  <div class="form-wrapper">
+    ${form.render(form_id='batch-form', buttons=capture(buttons))|n}
+  </div><!-- form-wrapper -->
+
+  <div style="display: flex; align-items: flex-start;">
+
+    % if status_breakdown is not Undefined and status_breakdown is not None:
         <div class="object-helper">
           <h3>Row Status Breakdown</h3>
           <div class="object-helper-content">
@@ -99,11 +103,15 @@
             % endif
           </div>
         </div>
-% endif
+    % endif
 
-<div class="form-wrapper">
+    <ul id="context-menu">
-  ${form.render(form_id='batch-form', buttons=capture(buttons))|n}
+      ${self.context_menu_items()}
-</div><!-- form-wrapper -->
+    </ul>
+
+  </div>
+
+</div>
 
 ${rows_grid|n}