Update column settings button to be a detail popover

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

@@ -210,16 +210,18 @@
     anchor={relationshipPanelAnchor}
     align="left"
   >
-    {#if relationshipPanelColumns.length}
-      <div class="relationship-header">
-        {relationshipFieldName} columns
-      </div>
-    {/if}
-    <svelte:self
-      columns={relationshipPanelColumns}
-      permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]}
-      fromRelationshipField={relationshipField}
-    />
+    <div class="nested">
+      {#if relationshipPanelColumns.length}
+        <div class="relationship-header">
+          {relationshipFieldName} columns
+        </div>
+      {/if}
+      <svelte:self
+        columns={relationshipPanelColumns}
+        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}>
-  <ActionButton
-    icon="ColumnSettings"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open || anyRestricted}
-    disabled={!$tableColumns.length}
-    accentColor="#674D00"
-  >
-    {text}
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
+<DetailPopover bind:this={popover} title="Column settings">
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
+      icon="ColumnSettings"
+      quiet
+      size="M"
+      on:click={popover?.open}
+      selected={open || anyRestricted}
+      disabled={!$tableColumns.length}
+      accentColor="#674D00"
+    >
+      {text}
+    </ActionButton>
+  </svelte:fragment>
   <ColumnsSettingContent
     columns={$tableColumns}
     canSetRelationshipSchemas={isEnabled(FeatureFlag.ENRICHED_RELATIONSHIPS)}
     {permissions}
   />
-</Popover>
+</DetailPopover>