Udpate sort button to be a detail popover

packages/builder/src/components/backend/DataTable/buttons/grid/GridSortButton.svelte

@@ -1,12 +1,12 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Select } from "@budibase/bbui"
+  import { ActionButton, Select } from "@budibase/bbui"
   import { canBeSortColumn } from "@budibase/frontend-core"
+  import DetailPopover from "components/common/DetailPopover.svelte"
 
   const { sort, columns } = getContext("grid")
 
-  let open = false
+  let popover
-  let anchor
 
   $: columnOptions = $columns
     .filter(col => canBeSortColumn(col.schema))
@@ -45,21 +45,19 @@
   }
 </script>
 
-<div bind:this={anchor}>
+<DetailPopover bind:this={popover} title="Sorting parameters">
+  <svelte:fragment slot="anchor" let:open>
     <ActionButton
       icon="SortOrderDown"
       quiet
       size="M"
-    on:click={() => (open = !open)}
+      on:click={popover?.open}
       selected={open}
       disabled={!columnOptions.length}
     >
       Sort
     </ActionButton>
-</div>
+  </svelte:fragment>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
   <Select
     placeholder="Default"
     value={$sort.column}
@@ -78,17 +76,4 @@
       label="Order"
     />
   {/if}
-  </div>
+</DetailPopover>
-</Popover>
-
-<style>
-  .content {
-    padding: 6px 12px 12px 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .content :global(.spectrum-Picker) {
-    width: 140px;
-  }
-</style>