Fix massive widths on remaining button actions

6 years ago · 1283fe520e
6 changed files with 60 additions and 33 deletions
--- 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 />
-
-{#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}
+
+  <Spacer medium />
+
+  {#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>
--- 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>
--- 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>
--- 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) {
--- 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);
--- 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) {