Improve styling for nodes table controls

Author: Trent Willis

app/styles/app.css

@@ -50,6 +50,11 @@ body {
   left: 0;
 }
 
+.nodes-controls {
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+}
+
 .nodes-table_header tr:hover {
   background-color: initial;
 }

app/templates/components/slow-node-times.hbs

@@ -1,10 +1,13 @@
-<div class="level">
+<div class="nodes-controls level is-marginless">
   <div class="level-left">
     <div class="level-item">
-      <p class="control">
-        {{input value=pluginNameFilter placeholder="Filter by plugin name..."}}
+      <p class="control has-addons">
+        {{input class="input" value=pluginNameFilter placeholder="Filter by plugin name..."}}
+
+        <button class="button is-primary {{if (not pluginNameFilter) 'is-disabled'}}" {{action (action (mut pluginNameFilter) '')}}>Clear</button>
       </p>
     </div>
+
     <div class="level-item">
       <p class="control">
         <label class="checkbox">
@@ -14,11 +17,6 @@
       </p>
     </div>
   </div>
-  <div class="level-right">
-    <p class="control">
-      <button class="button" {{action (action (mut pluginNameFilter) '')}}>Clear</button>
-    </p>
-  </div>
 </div>
 
 <table class="nodes-table table is-striped">