From d96ea9424cdb7375cfd6550c2729fbe8d4505aa5 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 28 Sep 2020 12:19:11 +0100
Subject: [PATCH] Small UI update to the binding interface with automations

Heading fixed - size reduced.
Spacing updating with the list section
Placeholder added
Link to docs added
---
 .../userInterface/GenericBindingPopover.svelte     | 14 ++++++++------
 .../userInterface/ModelViewSelect.svelte           |  1 +
 2 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte b/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
index 59392c37d9..5ad1a2c79f 100644
--- a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
@@ -28,11 +28,12 @@
 <Popover {anchor} {align} bind:this={popover}>
   <div class="container">
     <div class="bindings">
-      <Label large>Available bindings</Label>
+      <Heading small>Available bindings</Heading>
       <div class="bindings__wrapper">
         <div class="bindings__list">
           {#each categories as [categoryName, bindings]}
             <Heading extraSmall>{categoryName}</Heading>
+            <Spacer extraSmall />
             {#each bindings as binding}
               <div class="binding" on:click={() => onClickBinding(binding)}>
                 <span class="binding__label">{binding.label}</span>
@@ -46,16 +47,17 @@
       </div>
     </div>
     <div class="editor">
-      <Heading large>Data binding</Heading>
-      <Spacer small />
+      <Heading small>Data binding</Heading>
       <Body small lh black>
         Binding connects one piece of data to another and makes it dynamic.
         Click the objects on the left to add them to the textbox.
       </Body>
-      <Spacer medium />
-      <TextArea thin bind:value placeholder="..." />
+      <TextArea
+        thin
+        bind:value
+        placeholder="Add options from the left, type text, or do both" />
       <div class="controls">
-        <a href="https://docs.budibase.com">
+        <a href="https://docs.budibase.com/design/binding">
           <Body small>Learn more about binding</Body>
         </a>
         <Button on:click={popover.hide} primary>Done</Button>
diff --git a/packages/builder/src/components/userInterface/ModelViewSelect.svelte b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
index 6540e6eca8..5cc14f2ad5 100644
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@@ -72,6 +72,7 @@
   }
   .dropdown {
     padding: var(--spacing-m) 0;
+    z-index: 99999999;
   }
   .title {
     padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
