modal styling

packages/builder/src/database/FieldView.svelte

@@ -138,12 +138,19 @@
     {/if}
   </form>
 
-  <div class="uk-modal-footer uk-text-right">
+  <footer>
-    <ButtonGroup>
+    <ActionButton primary on:click={save}>Save</ActionButton>
-      <ActionButton primary on:click={save}>Save</ActionButton>
+    <ActionButton alert on:click={() => onFinished(false)}>Cancel</ActionButton>
-      <ActionButton alert on:click={() => onFinished(false)}>
+  </footer>
-        Cancel
-      </ActionButton>
-    </ButtonGroup>
-  </div>
 </div>
+
+<style>
+  footer {
+    position: absolute;
+    padding: 20px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
+  }
+</style>

packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte

@@ -18,8 +18,21 @@
 <section>
   Database Name
   <input class="uk-input" type="text" bind:value={databaseName} />
-  <div class="actions">
+  <footer>
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton disabled={!databaseName} on:click={createDatabase}>Save</ActionButton>
+    <ActionButton disabled={!databaseName} on:click={createDatabase}>
-  </div>
+      Save
+    </ActionButton>
+  </footer>
 </section>
+
+<style>
+  footer {
+    position: absolute;
+    padding: 20px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
+  }
+</style>

packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -63,7 +63,7 @@
         </div>
       {/each}
     </form>
-    <div class="actions">
+    <footer>
       <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
       <ActionButton
         on:click={async () => {
@@ -79,6 +79,17 @@
         }}>
         Save
       </ActionButton>
-    </div>
+    </footer>
   </div>
-</div>
+</div>
+
+<style>
+  footer {
+    position: absolute;
+    padding: 20px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
+  }
+</style>