Update column settings button to be a detail popover

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

@@ -210,6 +210,7 @@
     anchor={relationshipPanelAnchor}
     align="left"
   >
+    <div class="nested">
       {#if relationshipPanelColumns.length}
         <div class="relationship-header">
           {relationshipFieldName} columns
@@ -220,6 +221,7 @@
         permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]}
         fromRelationshipField={relationshipField}
       />
+    </div>
   </Popover>
 {/if}
 
@@ -230,11 +232,13 @@
   }
 
   .content {
-    padding: 12px 12px;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
+  .nested {
+    padding: 12px;
+  }
   .columns {
     display: grid;
     align-items: center;
@@ -262,6 +266,6 @@
   }
   .relationship-header {
     color: var(--spectrum-global-color-gray-600);
-    padding: 12px 12px 0 12px;
+    margin-bottom: 12px;
   }
 </style>

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

@@ -12,11 +12,11 @@
   import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
   import { isEnabled } from "helpers/featureFlags"
   import { FeatureFlag } from "@budibase/types"
+  import DetailPopover from "components/common/DetailPopover.svelte"
 
   const { tableColumns, datasource } = getContext("grid")
 
-  let open = false
-  let anchor
+  let popover
 
   $: anyRestricted = $tableColumns.filter(
     col => !col.visible || col.readonly
@@ -32,24 +32,23 @@
       : [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
 </script>
 
-<div bind:this={anchor}>
+<DetailPopover bind:this={popover} title="Column settings">
+  <svelte:fragment slot="anchor" let:open>
     <ActionButton
       icon="ColumnSettings"
       quiet
       size="M"
-    on:click={() => (open = !open)}
+      on:click={popover?.open}
       selected={open || anyRestricted}
       disabled={!$tableColumns.length}
       accentColor="#674D00"
     >
       {text}
     </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
+  </svelte:fragment>
   <ColumnsSettingContent
     columns={$tableColumns}
     canSetRelationshipSchemas={isEnabled(FeatureFlag.ENRICHED_RELATIONSHIPS)}
     {permissions}
   />
-</Popover>
+</DetailPopover>