From e33db1ea3992d64976efb57eb50999c60bef4995 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 9 Apr 2020 13:47:47 +0200
Subject: [PATCH] styling fixes

---
 .../src/components/database/FieldView.svelte  | 14 +++----
 .../src/components/database/IndexView.svelte  |  1 +
 .../modals/CreateEditModel.svelte             |  9 ----
 .../modals/CreateEditView.svelte              |  7 ----
 .../src/components/database/ModelView.svelte  | 41 ++++++++++---------
 5 files changed, 29 insertions(+), 43 deletions(-)

diff --git a/packages/builder/src/components/database/FieldView.svelte b/packages/builder/src/components/database/FieldView.svelte
index 45944596cd..923dc697bc 100644
--- a/packages/builder/src/components/database/FieldView.svelte
+++ b/packages/builder/src/components/database/FieldView.svelte
@@ -136,18 +136,18 @@
         bind:value={clonedField.typeOptions.maxLength} />
     {/if}
   </form>
-
-  <footer>
-    <ActionButton primary on:click={save}>Save</ActionButton>
-    <ActionButton alert on:click={() => onFinished(false)}>Cancel</ActionButton>
-  </footer>
 </div>
+<footer>
+  <ActionButton primary on:click={save}>Save</ActionButton>
+  <ActionButton alert on:click={() => onFinished(false)}>Cancel</ActionButton>
+</footer>
 
 <style>
+  .root {
+    margin: 20px;
+  }
   footer {
-    position: absolute;
     padding: 20px;
-    width: 100%;
     bottom: 0;
     left: 0;
     background: #fafafa;
diff --git a/packages/builder/src/components/database/IndexView.svelte b/packages/builder/src/components/database/IndexView.svelte
index c094aaa840..8f2d7f69e7 100644
--- a/packages/builder/src/components/database/IndexView.svelte
+++ b/packages/builder/src/components/database/IndexView.svelte
@@ -144,6 +144,7 @@
   }
 
   heading {
+    padding: 20px 20px 0 20px;
     display: flex;
     align-items: center;
   }
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel.svelte
index 9e1a90e5a6..f6213268c6 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel.svelte
@@ -1,16 +1,7 @@
 <script>
-  import ActionButton from "components/common/ActionButton.svelte"
-  import { backendUiStore } from "builderStore"
   import ModelView from "../../ModelView.svelte"
-  import * as api from "../api"
 </script>
 
 <section>
   <ModelView />
 </section>
-
-<style>
-  section {
-    padding: 30px;
-  }
-</style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index ee889145f0..1c025d039b 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -1,14 +1,7 @@
 <script>
   import IndexView from "../../IndexView.svelte"
-  import * as api from "../api"
 </script>
 
 <section>
   <IndexView />
 </section>
-
-<style>
-  section {
-    padding: 30px;
-  }
-</style>
diff --git a/packages/builder/src/components/database/ModelView.svelte b/packages/builder/src/components/database/ModelView.svelte
index 45060ce954..eef0651285 100644
--- a/packages/builder/src/components/database/ModelView.svelte
+++ b/packages/builder/src/components/database/ModelView.svelte
@@ -100,17 +100,17 @@
   }
 </script>
 
-<div class="root">
-  <heading>
-    {#if !editingField}
-      <i class="ri-list-settings-line button--toggled" />
-      <h3 class="budibase__title--3">Create / Edit Model</h3>
-    {:else}
-      <i class="ri-file-list-line button--toggled" />
-      <h3 class="budibase__title--3">Create / Edit Field</h3>
-    {/if}
-  </heading>
+<heading>
   {#if !editingField}
+    <i class="ri-list-settings-line button--toggled" />
+    <h3 class="budibase__title--3">Create / Edit Model</h3>
+  {:else}
+    <i class="ri-file-list-line button--toggled" />
+    <h3 class="budibase__title--3">Create / Edit Field</h3>
+  {/if}
+</heading>
+{#if !editingField}
+  <div class="padding">
     <h4 class="budibase__label--big">Settings</h4>
 
     {#if $store.errors && $store.errors.length > 0}
@@ -185,18 +185,18 @@
         </ActionButton>
       {/if}
     </div>
-  {:else}
-    <FieldView
-      field={fieldToEdit}
-      onFinished={onFinishedFieldEdit}
-      allFields={record.fields}
-      store={$store} />
-  {/if}
-</div>
+  </div>
+{:else}
+  <FieldView
+    field={fieldToEdit}
+    onFinished={onFinishedFieldEdit}
+    allFields={record.fields}
+    store={$store} />
+{/if}
 
 <style>
-  .root {
-    height: 100%;
+  .padding {
+    padding: 20px;
   }
 
   .new-field {
@@ -225,6 +225,7 @@
   }
 
   heading {
+    padding: 20px 20px 0 20px;
     display: flex;
     align-items: center;
   }