styling fixes

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

@@ -136,18 +136,18 @@
         bind:value={clonedField.typeOptions.maxLength} />
     {/if}
   </form>
-
-  <footer>
+</div>
+<footer>
   <ActionButton primary on:click={save}>Save</ActionButton>
   <ActionButton alert on:click={() => onFinished(false)}>Cancel</ActionButton>
-  </footer>
-</div>
+</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,8 +100,7 @@
   }
 </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>
@@ -109,8 +108,9 @@
     <i class="ri-file-list-line button--toggled" />
     <h3 class="budibase__title--3">Create / Edit Field</h3>
   {/if}
-  </heading>
-  {#if !editingField}
+</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>
+{:else}
   <FieldView
     field={fieldToEdit}
     onFinished={onFinishedFieldEdit}
     allFields={record.fields}
     store={$store} />
-  {/if}
-</div>
+{/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;
   }