From 1283fe520ebd890ddf14dc252ebb5003e96430f5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 19 Mar 2021 14:26:37 +0000
Subject: [PATCH] Fix massive widths on remaining button actions

---
 .../EventsEditor/actions/ExecuteQuery.svelte  | 65 +++++++++++--------
 .../EventsEditor/actions/LogIn.svelte         |  4 +-
 .../EventsEditor/actions/LogOut.svelte        | 11 +++-
 .../EventsEditor/actions/NavigateTo.svelte    |  2 +
 .../actions/TriggerAutomation.svelte          |  5 ++
 .../EventsEditor/actions/ValidateForm.svelte  |  2 +
 6 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
index e18336fab5..a5cbd7e69d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@@ -24,36 +24,45 @@
   }
 </script>
 
-<Label small>Datasource</Label>
-<Select thin secondary bind:value={parameters.datasourceId}>
-  <option value="" />
-  {#each $backendUiStore.datasources as datasource}
-    <option value={datasource._id}>{datasource.name}</option>
-  {/each}
-</Select>
-
-<Spacer medium />
-
-{#if parameters.datasourceId}
-  <Label small>Query</Label>
-  <Select thin secondary bind:value={parameters.queryId}>
+<div class="root">
+  <Label small>Datasource</Label>
+  <Select thin secondary bind:value={parameters.datasourceId}>
     <option value="" />
-    {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
-      <option value={query._id}>{query.name}</option>
+    {#each $backendUiStore.datasources as datasource}
+      <option value={datasource._id}>{datasource.name}</option>
     {/each}
   </Select>
-{/if}
 
-<Spacer medium />
+  <Spacer medium />
 
-{#if query?.parameters?.length > 0}
-  <ParameterBuilder
-    bind:customParams={parameters.queryParams}
-    parameters={query.parameters}
-    bindings={bindableProperties} />
-  <IntegrationQueryEditor
-    height={200}
-    {query}
-    schema={fetchQueryDefinition(query)}
-    editable={false} />
-{/if}
+  {#if parameters.datasourceId}
+    <Label small>Query</Label>
+    <Select thin secondary bind:value={parameters.queryId}>
+      <option value="" />
+      {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
+        <option value={query._id}>{query.name}</option>
+      {/each}
+    </Select>
+  {/if}
+
+  <Spacer medium />
+
+  {#if query?.parameters?.length > 0}
+    <ParameterBuilder
+      bind:customParams={parameters.queryParams}
+      parameters={query.parameters}
+      bindings={bindableProperties} />
+    <IntegrationQueryEditor
+      height={200}
+      {query}
+      schema={fetchQueryDefinition(query)}
+      editable={false} />
+  {/if}
+</div>
+
+<style>
+  .root {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
index c49369bf29..eee4dc2bc7 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
@@ -30,7 +30,9 @@
     display: grid;
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr auto 1fr;
+    grid-template-columns: auto 1fr;
     align-items: baseline;
+    max-width: 800px;
+    margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
index 2b0aad8342..7306ed4e61 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
@@ -1,7 +1,14 @@
-<div class="root">This action doesn't require any additional settings.</div>
+<script>
+  import { Body } from "@budibase/bbui"
+</script>
+
+<div class="root">
+  <Body small grey>This action doesn't require any additional settings.</Body>
+</div>
 
 <style>
   .root {
-    font-size: var(--font-size-s);
+    max-width: 800px;
+    margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
index 65071837e7..b9567c6523 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@@ -27,6 +27,8 @@
     display: flex;
     flex-direction: row;
     align-items: baseline;
+    max-width: 800px;
+    margin: 0 auto;
   }
 
   .root :global(> div) {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
index 1a3276800a..4ae5e320fc 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
@@ -101,6 +101,11 @@
 </div>
 
 <style>
+  .root {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
   .fields {
     display: grid;
     column-gap: var(--spacing-l);
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index d1f67015d5..1087d028b3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -29,6 +29,8 @@
     display: flex;
     flex-direction: row;
     align-items: baseline;
+    max-width: 800px;
+    margin: 0 auto;
   }
 
   .root :global(> div) {