Screen dropdown manu uses bbui dropdown menu

packages/builder/package.json

@@ -55,7 +55,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.15.8",
+    "@budibase/bbui": "^1.16.0",
     "@budibase/client": "^0.1.1",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",

packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte

@@ -4,20 +4,14 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import UIkit from "uikit"
   import api from "builderStore/api"
+  import Portal from "svelte-portal"
+  import { DropdownMenu } from "@budibase/bbui"
 
   export let screen
 
   let confirmDeleteDialog
-  let dropdownEl
+  let dropdown
-
+  let buttonForDropdown
-  $: dropdown = UIkit.dropdown(dropdownEl, {
-    mode: "click",
-    offset: 0,
-    pos: "bottom-right",
-    "delay-hide": 0,
-    animation: false,
-  })
-  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
 
   const hideDropdown = () => {
     dropdown.hide()
@@ -42,15 +36,17 @@
 </script>
 
 <div class="root boundary" on:click|stopPropagation={() => {}}>
-  <button>
+  <button on:click={() => dropdown.show()} bind:this={buttonForDropdown}>
     <MoreIcon />
   </button>
-  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
+  <DropdownMenu bind:this={dropdown} anchor={buttonForDropdown}>
-    <li class="item" on:click={() => confirmDeleteDialog.show()}>
+    <ul class="menu" on:click={hideDropdown}>
-      <i class="icon ri-delete-bin-2-line" />
+      <li class="item" on:click={() => confirmDeleteDialog.show()}>
-      Delete
+        <i class="icon ri-delete-bin-2-line" />
-    </li>
+        Delete
-  </ul>
+      </li>
+    </ul>
+  </DropdownMenu>
 </div>
 
 <ConfirmDialog
@@ -81,6 +77,7 @@
     overflow: visible;
     padding: 12px 0px;
     border-radius: 5px;
+    margin: 0;
   }
 
   .menu li {