Update column editor and filter editor to make action buttons full width

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte

@@ -75,7 +75,9 @@
   }
 </script>
 
-<ActionButton on:click={open}>Configure columns</ActionButton>
+<div class="column-editor">
+  <ActionButton on:click={open}>Configure columns</ActionButton>
+</div>
 <Drawer bind:this={drawer} title="{subject} Columns">
   <svelte:fragment slot="description">
     Configure the columns in your {subject.toLowerCase()}.
@@ -89,3 +91,9 @@
     {allowCellEditing}
   />
 </Drawer>
+
+<style>
+  .column-editor :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>

packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte

@@ -20,15 +20,26 @@
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchemaForDatasource($currentAsset, datasource)?.schema
   $: schemaFields = Object.values(schema || {})
+  $: text = getText(value)
 
   async function saveFilter() {
     dispatch("change", tempValue)
     notifications.success("Filters saved")
     drawer.hide()
   }
+
+  const getText = filters => {
+    if (!filters?.length) {
+      return "No filters set"
+    } else {
+      return `${filters.length} filter${filters.length === 1 ? "" : "s"} set`
+    }
+  }
 </script>
 
-<ActionButton on:click={drawer.show}>Define filters</ActionButton>
+<div class="filter-editor">
+  <ActionButton on:click={drawer.show}>{text}</ActionButton>
+</div>
 <Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <FilterDrawer
@@ -40,3 +51,9 @@
     on:change={e => (tempValue = e.detail)}
   />
 </Drawer>
+
+<style>
+  .filter-editor :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>