styling fixes

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;

packages/builder/src/components/database/IndexView.svelte

@@ -144,6 +144,7 @@
   }
 
   heading {
+    padding: 20px 20px 0 20px;
     display: flex;
     align-items: center;
   }

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>

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>

packages/builder/src/components/database/ModelView.svelte

@@ -100,17 +100,17 @@
   }
 </script>
 
-<div class="root">
+<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}
+    <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}
+  </div>
-    <FieldView
+{:else}
-      field={fieldToEdit}
+  <FieldView
-      onFinished={onFinishedFieldEdit}
+    field={fieldToEdit}
-      allFields={record.fields}
+    onFinished={onFinishedFieldEdit}
-      store={$store} />
+    allFields={record.fields}
-  {/if}
+    store={$store} />
-</div>
+{/if}
 
 <style>
-  .root {
+  .padding {
-    height: 100%;
+    padding: 20px;
   }
 
   .new-field {
@@ -225,6 +225,7 @@
   }
 
   heading {
+    padding: 20px 20px 0 20px;
     display: flex;
     align-items: center;
   }