Update validation editor setting to be full width and have descriptive text

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

@@ -8,16 +8,29 @@
   export let componentDefinition
   export let type
 
+  const dispatch = createEventDispatcher()
   let drawer
 
-  const dispatch = createEventDispatcher()
+  $: text = getText(value)
+
   const save = () => {
     dispatch("change", value)
     drawer.hide()
   }
+
+  const getText = rules => {
+    if (!rules?.length) {
+      return "No rules set"
+    } else {
+      return `${rules.length} rule${rules.length === 1 ? "" : "s"} set`
+    }
+  }
 </script>
 
-<ActionButton on:click={drawer.show}>Configure validation</ActionButton>
+<div class="validation-editor">
+  <ActionButton on:click={drawer.show}>{text}</ActionButton>
+</div>
+
 <Drawer bind:this={drawer} title="Validation Rules">
   <svelte:fragment slot="description">
     Configure validation rules for this field.
@@ -31,3 +44,9 @@
     {componentDefinition}
   />
 </Drawer>
+
+<style>
+  .validation-editor :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>