Update long form cells to use popovers

packages/frontend-core/src/components/grid/cells/LongFormCell.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount, tick } from "svelte"
   import { clickOutside } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let value
   export let focused = false
@@ -8,10 +9,10 @@
   export let readonly = false
   export let api
   export let invertX = false
-  export let invertY = false
 
   let textarea
   let isOpen = false
+  let anchor
 
   $: editable = focused && !readonly
   $: {
@@ -52,25 +53,30 @@
   })
 </script>
 
-{#if isOpen}
+<!-- svelte-ignore a11y-no-static-element-interactions -->
-  <textarea
+<!-- svelte-ignore a11y-click-events-have-key-events -->
-    class:invertX
+<div
-    class:invertY
+  class="long-form-cell"
-    bind:this={textarea}
+  on:click={editable ? open : null}
-    value={value || ""}
+  class:editable
-    on:change={handleChange}
+  bind:this={anchor}
-    on:wheel|stopPropagation
+>
-    spellcheck="false"
+  <div class="value">
-    use:clickOutside={close}
+    {value || ""}
-  />
-{:else}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="long-form-cell" on:click={editable ? open : null} class:editable>
-    <div class="value">
-      {value || ""}
-    </div>
   </div>
+</div>
+
+{#if isOpen}
+  <GridPopover {anchor} {invertX} on:close={close}>
+    <textarea
+      bind:this={textarea}
+      value={value || ""}
+      on:change={handleChange}
+      on:wheel|stopPropagation
+      spellcheck="false"
+      use:clickOutside={close}
+    />
+  </GridPopover>
 {/if}
 
 <style>
@@ -93,30 +99,20 @@
     line-height: 20px;
   }
   textarea {
+    border: none;
+    width: 320px;
+    flex: 1 1 auto;
+    height: var(--max-cell-render-overflow);
     padding: var(--cell-padding);
     margin: 0;
-    border: 2px solid var(--cell-color);
     background: var(--cell-background);
     font-size: var(--cell-font-size);
     font-family: var(--font-sans);
     color: inherit;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% + var(--max-cell-render-verflow));
-    height: calc(var(--row-height) + var(--max-cell-render-overflow));
     z-index: 1;
-    border-radius: 2px;
     resize: none;
     line-height: 20px;
-  }
+    overflow: auto;
-  textarea.invertX {
-    left: auto;
-    right: 0;
-  }
-  textarea.invertY {
-    transform: translateY(-100%);
-    top: calc(100% + 1px);
   }
   textarea:focus {
     outline: none;

packages/frontend-core/src/components/grid/overlays/GridPopover.svelte

@@ -61,5 +61,7 @@
   .grid-popover-contents {
     overflow-y: auto;
     overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
   }
 </style>