From 21e5c8ecda3f243718ad8fc9890bdb392f3f2c47 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 17:19:07 +0200
Subject: [PATCH] Overflow tooltip

---
 packages/bbui/src/Popover/Popover.svelte                     | 5 +++++
 .../src/components/grid/controls/ColumnsSettingButton.svelte | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index aa811afe1e..05d8af1693 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -27,6 +27,7 @@
   export let clickOutsideOverride = false
   export let resizable = true
   export let wrap = false
+  export let overflow = false
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -104,6 +105,7 @@
       class="spectrum-Popover is-open"
       class:customZindex
       class:hidden={!showPopover}
+      class:overflow
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
       transition:fly|local={{ y: -20, duration: animate ? 260 : 0 }}
@@ -122,6 +124,9 @@
     overflow: auto;
     transition: opacity 260ms ease-out;
   }
+  .spectrum-Popover.overflow {
+    overflow: visible;
+  }
   .hidden {
     opacity: 0;
     pointer-events: none;
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 0a85e41966..1c8a8ec6a0 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -31,7 +31,7 @@
   }
 
   const options = [
-    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
+    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writeable" },
     {
       icon: "VisibilityOff",
       value: PERMISSION_OPTIONS.HIDDEN,
@@ -61,7 +61,7 @@
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align="left">
+<Popover bind:open {anchor} align="left" overflow>
   <div class="content">
     <div class="columns">
       {#if $stickyColumn}