From 83eed815c33a72bb6de5abaefca2872895922155 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 28 Oct 2024 14:05:14 +0000
Subject: [PATCH] Update size button to be a detail popover

---
 .../buttons/grid/GridSizeButton.svelte        | 97 +++++++++----------
 1 file changed, 47 insertions(+), 50 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte
index f9499e54b7..c72366c53b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Label } from "@budibase/bbui"
+  import { ActionButton, Label } from "@budibase/bbui"
+  import DetailPopover from "components/common/DetailPopover.svelte"
 
   const {
     Constants,
@@ -32,8 +33,7 @@
     },
   ]
 
-  let open = false
-  let anchor
+  let popover
 
   // Column width sizes
   $: allSmall = $columns.every(col => col.width === smallColSize)
@@ -66,55 +66,52 @@
   }
 </script>
 
-<div bind:this={anchor}>
-  <ActionButton
-    icon="MoveUpDown"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-    disabled={!$columns.length}
-  >
-    Size
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
-    <div class="size">
-      <Label>Row height</Label>
-      <div class="options">
-        {#each rowSizeOptions as option}
-          <ActionButton
-            disabled={$fixedRowHeight}
-            quiet
-            selected={$rowHeight === option.size}
-            on:click={() => changeRowHeight(option.size)}
-          >
-            {option.label}
-          </ActionButton>
-        {/each}
-      </div>
-    </div>
-    <div class="size">
-      <Label>Column width</Label>
-      <div class="options">
-        {#each columnSizeOptions as option}
-          <ActionButton
-            quiet
-            on:click={() => columns.actions.changeAllColumnWidths(option.size)}
-            selected={option.selected}
-          >
-            {option.label}
-          </ActionButton>
-        {/each}
-        {#if custom}
-          <ActionButton selected={custom} quiet>Custom</ActionButton>
-        {/if}
-      </div>
+<DetailPopover bind:this={popover} title="Column and row size">
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
+      icon="MoveUpDown"
+      quiet
+      size="M"
+      on:click={popover?.open}
+      selected={open}
+      disabled={!$columns.length}
+    >
+      Size
+    </ActionButton>
+  </svelte:fragment>
+  <div class="size">
+    <Label>Row height</Label>
+    <div class="options">
+      {#each rowSizeOptions as option}
+        <ActionButton
+          disabled={$fixedRowHeight}
+          quiet
+          selected={$rowHeight === option.size}
+          on:click={() => changeRowHeight(option.size)}
+        >
+          {option.label}
+        </ActionButton>
+      {/each}
     </div>
   </div>
-</Popover>
+  <div class="size">
+    <Label>Column width</Label>
+    <div class="options">
+      {#each columnSizeOptions as option}
+        <ActionButton
+          quiet
+          on:click={() => columns.actions.changeAllColumnWidths(option.size)}
+          selected={option.selected}
+        >
+          {option.label}
+        </ActionButton>
+      {/each}
+      {#if custom}
+        <ActionButton selected={custom} quiet>Custom</ActionButton>
+      {/if}
+    </div>
+  </div>
+</DetailPopover>
 
 <style>
   .content {