Use explicit flex styles instead of "level" for grid filters etc.

just to be more precise, and consistent

tailbone/static/css/filters.css

@@ -3,10 +3,6 @@
  * Grid Filters
  ******************************/
 
-.filters .filter {
-    margin-bottom: 0.5rem;
-}
-
 .filters .filter-fieldname .field,
 .filters .filter-fieldname .field label {
     width: 100%;

tailbone/templates/grids/filter-components.mako

@@ -195,26 +195,20 @@
 
 <%def name="make_grid_filter_component()">
   <script type="text/x-template" id="grid-filter-template">
+    <div class="filter"
+         v-show="filter.visible"
+         style="display: flex; gap: 0.5rem;">
 
-    <div class="level filter" v-show="filter.visible">
-      <div class="level-left"
-           style="align-items: start;">
-
-        <div class="level-item filter-fieldname">
-
-          <b-field>
-            <b-button @click="filter.active = !filter.active"
-                      icon-pack="fas"
-                      :icon-left="filter.active ? 'check' : null">
-              {{ filter.label }}
-            </b-button>
-          </b-field>
-
+        <div class="filter-fieldname">
+          <b-button @click="filter.active = !filter.active"
+                    icon-pack="fas"
+                    :icon-left="filter.active ? 'check' : null">
+            {{ filter.label }}
+          </b-button>
         </div>
 
-        <b-field grouped v-show="filter.active"
-                 class="level-item"
-                 style="align-items: start;">
+        <div v-show="filter.active"
+             style="display: flex; gap: 0.5rem;">
 
           <b-select v-model="filter.verb"
                     @input="focusValue()"
@@ -266,11 +260,8 @@
                    ref="valueInput">
           </b-input>
 
-        </b-field>
-
-      </div><!-- level-left -->
-    </div><!-- level -->
-
+        </div>
+    </div>
   </script>
   <script>
 

tailbone/templates/grids/filters.mako

@@ -2,26 +2,26 @@
 
 <form action="${form.action_url}" method="GET" @submit.prevent="applyFilters()">
 
-  <grid-filter v-for="key in filtersSequence"
-               :key="key"
-               :filter="filters[key]"
-               ref="gridFilters">
-  </grid-filter>
+  <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+    <grid-filter v-for="key in filtersSequence"
+                 :key="key"
+                 :filter="filters[key]"
+                 ref="gridFilters">
+    </grid-filter>
+  </div>
 
-  <b-field grouped>
+  <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
 
     <b-button type="is-primary"
               native-type="submit"
               icon-pack="fas"
-              icon-left="check"
-              class="control">
+              icon-left="check">
       Apply Filters
     </b-button>
 
     <b-button v-if="!addFilterShow"
               icon-pack="fas"
               icon-left="plus"
-              class="control"
               @click="addFilterButton">
       Add Filter
     </b-button>
@@ -44,15 +44,13 @@
 
     <b-button @click="resetView()"
               icon-pack="fas"
-              icon-left="home"
-              class="control">
+              icon-left="home">
       Default View
     </b-button>
 
     <b-button @click="clearFilters()"
               icon-pack="fas"
-              icon-left="trash"
-              class="control">
+              icon-left="trash">
       No Filters
     </b-button>
 
@@ -60,12 +58,11 @@
         <b-button @click="saveDefaults()"
                   icon-pack="fas"
                   icon-left="save"
-                  class="control"
                   :disabled="savingDefaults">
           {{ savingDefaults ? "Working, please wait..." : "Save Defaults" }}
         </b-button>
     % endif
 
-  </b-field>
+  </div>
 
 </form>