From ea14af8a64eeba84b3a964b13f63a49bfd67906f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 28 May 2024 11:00:47 +0100
Subject: [PATCH 01/27] Offset button column to account for vertical scrollbar
 if required

---
 .../src/components/grid/layout/ButtonColumn.svelte   |  7 ++++++-
 .../src/components/grid/layout/Grid.svelte           |  3 ++-
 .../components/grid/overlays/ScrollOverlay.svelte    | 12 ++++++------
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 3448042894..2e9bcf43d5 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -3,6 +3,7 @@
   import { Button } from "@budibase/bbui"
   import GridCell from "../cells/GridCell.svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import { ScrollBarSize } from "../lib/constants"
 
   const {
     renderedRows,
@@ -16,6 +17,7 @@
     scroll,
     isDragging,
     buttonColumnWidth,
+    showVScrollbar,
   } = getContext("grid")
 
   let measureContainer
@@ -67,7 +69,7 @@
             selected={rowSelected}
             highlighted={rowHovered || rowFocused}
           >
-            <div class="buttons">
+            <div class="buttons" class:offset={$showVScrollbar}>
               {#each buttons as button}
                 <Button
                   newStyles
@@ -121,6 +123,9 @@
     gap: var(--cell-padding);
     height: inherit;
   }
+  .buttons.offset {
+    padding-right: calc(var(--cell-padding) + 2 * var(--scroll-bar-size) - 2px);
+  }
   .buttons :global(.spectrum-Button-Label) {
     display: flex;
     align-items: center;
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 4fb3747bfd..5eb14beede 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -29,6 +29,7 @@
     Padding,
     SmallRowHeight,
     ControlsHeight,
+    ScrollBarSize,
   } from "../lib/constants"
 
   export let API = null
@@ -145,7 +146,7 @@
   class:quiet
   on:mouseenter={() => gridFocused.set(true)}
   on:mouseleave={() => gridFocused.set(false)}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px;"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px; --scroll-bar-size:{ScrollBarSize}px;"
 >
   {#if showControls}
     <div class="controls">
diff --git a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
index 71d04ecbda..f7a18eb2f8 100644
--- a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
@@ -119,7 +119,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="v-scrollbar"
-    style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
+    style="top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
     on:touchstart={startVDragging}
     class:dragging={isDraggingV}
@@ -129,7 +129,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="h-scrollbar"
-    style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
+    style="left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
     on:touchstart={startHDragging}
     class:dragging={isDraggingH}
@@ -149,11 +149,11 @@
     opacity: 1;
   }
   .v-scrollbar {
-    width: var(--size);
-    right: var(--size);
+    width: var(--scroll-bar-size);
+    right: var(--scroll-bar-size);
   }
   .h-scrollbar {
-    height: var(--size);
-    bottom: var(--size);
+    height: var(--scroll-bar-size);
+    bottom: var(--scroll-bar-size);
   }
 </style>

From 9c446fee6b1c315c828f616fb6612d509e2f948d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 28 May 2024 11:01:11 +0100
Subject: [PATCH 02/27] Lint

---
 .../frontend-core/src/components/grid/layout/ButtonColumn.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 2e9bcf43d5..d098309ac9 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -3,7 +3,6 @@
   import { Button } from "@budibase/bbui"
   import GridCell from "../cells/GridCell.svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
-  import { ScrollBarSize } from "../lib/constants"
 
   const {
     renderedRows,

From 1a83b746b5095aed9b1baddf0d93dec94e829555 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 28 May 2024 14:41:21 +0100
Subject: [PATCH 03/27] Ensure grid autoscroll for selected cell visibility
 accounts for button column width

---
 packages/frontend-core/src/components/grid/stores/scroll.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js
index b071c1fc38..e7114cd00c 100644
--- a/packages/frontend-core/src/components/grid/stores/scroll.js
+++ b/packages/frontend-core/src/components/grid/stores/scroll.js
@@ -109,6 +109,7 @@ export const initialise = context => {
     maxScrollTop,
     scrollLeft,
     maxScrollLeft,
+    buttonColumnWidth,
   } = context
 
   // Ensure scroll state never goes invalid, which can happen when changing
@@ -194,8 +195,10 @@ export const initialise = context => {
 
     // Ensure column is not cutoff on right edge
     else {
+      const $buttonColumnWidth = get(buttonColumnWidth)
       const rightEdge = column.left + column.width
-      const rightBound = $bounds.width + $scroll.left - FocusedCellMinOffset
+      const rightBound =
+        $bounds.width + $scroll.left - FocusedCellMinOffset - $buttonColumnWidth
       delta = rightEdge - rightBound
       if (delta > 0) {
         scroll.update(state => ({

From 35842525c5e8a5e709fc184fe510bda5f4476803 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 May 2024 08:47:57 +0100
Subject: [PATCH 04/27] Fix bug where button columns couldn't observe
 dimensions when no rows exist

---
 .../src/components/grid/layout/ButtonColumn.svelte         | 7 +++----
 .../src/components/grid/layout/GridScrollWrapper.svelte    | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index d098309ac9..20cfdb1ec5 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -19,7 +19,7 @@
     showVScrollbar,
   } = getContext("grid")
 
-  let measureContainer
+  let container
 
   $: buttons = $props.buttons?.slice(0, 3) || []
   $: columnsWidth = $visibleColumns.reduce(
@@ -40,7 +40,7 @@
       const width = entries?.[0]?.contentRect?.width ?? 0
       buttonColumnWidth.set(width)
     })
-    observer.observe(measureContainer)
+    observer.observe(container)
   })
 </script>
 
@@ -51,7 +51,7 @@
   class:hidden={$buttonColumnWidth === 0}
 >
   <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
-    <GridScrollWrapper scrollVertically attachHandlers>
+    <GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
       {#each $renderedRows as row}
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
@@ -60,7 +60,6 @@
           class="row"
           on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
           on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
-          bind:this={measureContainer}
         >
           <GridCell
             width="auto"
diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
index 88fb57ba8f..763b01dd84 100644
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@@ -18,6 +18,7 @@
   export let scrollVertically = false
   export let scrollHorizontally = false
   export let attachHandlers = false
+  export let ref
 
   // Used for tracking touch events
   let initialTouchX
@@ -109,7 +110,7 @@
   on:touchmove={attachHandlers ? handleTouchMove : null}
   on:click|self={() => ($focusedCellId = null)}
 >
-  <div {style} class="inner">
+  <div {style} class="inner" bind:this={ref}>
     <slot />
   </div>
 </div>

From e1ee233aaf421c1825b54416a4789dd66817738a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 May 2024 09:51:01 +0100
Subject: [PATCH 05/27] Only clear change cache for keys which have been saved
 and haven't been further altered since the request started!

---
 .../src/components/grid/stores/rows.js        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index c73dae8991..08e43eef32 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -404,8 +404,11 @@ export const createActions = context => {
 
     // Save change
     try {
-      // Mark as in progress
-      inProgressChanges.update(state => ({ ...state, [rowId]: true }))
+      // Incremenet change count for this row
+      inProgressChanges.update(state => ({
+        ...state,
+        [rowId]: (state[rowId] || 0) + 1,
+      }))
 
       // Update row
       const changes = get(rowChangeCache)[rowId]
@@ -423,17 +426,25 @@ export const createActions = context => {
         await refreshRow(saved.id)
       }
 
-      // Wipe row change cache now that we've saved the row
+      // Wipe row change cache for any values which have been saved
+      const liveChanges = get(rowChangeCache)[rowId]
       rowChangeCache.update(state => {
-        delete state[rowId]
+        Object.keys(changes || {}).forEach(key => {
+          if (changes[key] === liveChanges?.[key]) {
+            delete state[rowId][key]
+          }
+        })
         return state
       })
     } catch (error) {
       handleValidationError(rowId, error)
     }
 
-    // Mark as completed
-    inProgressChanges.update(state => ({ ...state, [rowId]: false }))
+    // Decrement change count for this row
+    inProgressChanges.update(state => ({
+      ...state,
+      [rowId]: (state[rowId] || 1) - 1,
+    }))
   }
 
   // Updates a value of a row

From 38c405ff6ff4747d0e21bc74693514393df2c7cd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 May 2024 09:59:54 +0100
Subject: [PATCH 06/27] Ensure single character changes to non-focused fields
 are properly persisted when changing focused row

---
 .../src/components/grid/stores/rows.js        | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 08e43eef32..5140a7da8b 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -564,7 +564,6 @@ export const initialise = context => {
     previousFocusedCellId,
     rows,
     validation,
-    focusedCellId,
   } = context
 
   // Wipe the row change cache when changing row
@@ -582,20 +581,12 @@ export const initialise = context => {
     if (!id) {
       return
     }
-    // Stop if we changed row
-    const split = parseCellID(id)
-    const oldRowId = split.id
-    const oldColumn = split.field
-    const { id: newRowId } = parseCellID(get(focusedCellId))
-    if (oldRowId !== newRowId) {
-      return
-    }
-    // Otherwise we just changed cell in the same row
-    const hasChanges = oldColumn in (get(rowChangeCache)[oldRowId] || {})
-    const hasErrors = validation.actions.rowHasErrors(oldRowId)
-    const isSavingChanges = get(inProgressChanges)[oldRowId]
-    if (oldRowId && !hasErrors && hasChanges && !isSavingChanges) {
-      await rows.actions.applyRowChanges(oldRowId)
+    const { id: rowId, field } = parseCellID(id)
+    const hasChanges = field in (get(rowChangeCache)[rowId] || {})
+    const hasErrors = validation.actions.rowHasErrors(rowId)
+    const isSavingChanges = get(inProgressChanges)[rowId]
+    if (rowId && !hasErrors && hasChanges && !isSavingChanges) {
+      await rows.actions.applyRowChanges(rowId)
     }
   })
 }

From d533ef70be76515ba589e95c83ab625ae7c4bc63 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 May 2024 13:58:29 +0100
Subject: [PATCH 07/27] Enrich all bindings in one go to massively increase
 performance when opening binding panels

---
 .../common/bindings/BindingPanel.svelte       | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 5114ad2d7a..d8edf0cbb1 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -11,6 +11,7 @@
   import {
     decodeJSBinding,
     encodeJSBinding,
+    processObjectSync,
     processStringSync,
   } from "@budibase/string-templates"
   import { readableToRuntimeBinding } from "dataBinding"
@@ -153,13 +154,6 @@
     debouncedEval(expression, context, snippets)
   }
 
-  const getBindingValue = (binding, context, snippets) => {
-    const js = `return $("${binding.runtimeBinding}")`
-    const hbs = encodeJSBinding(js)
-    const res = processStringSync(hbs, { ...context, snippets })
-    return JSON.stringify(res, null, 2)
-  }
-
   const highlightJSON = json => {
     return formatHighlight(json, {
       keyColor: "#e06c75",
@@ -172,11 +166,27 @@
   }
 
   const enrichBindings = (bindings, context, snippets) => {
-    return bindings.map(binding => {
+    // Create a single big array to enrich in one go
+    const bindingStrings = bindings.map(binding => {
+      if (binding.runtimeBinding.startsWith('trim "')) {
+        // Account for nasty hardcoded HBS bindings for roles, for legacy
+        // compatibility
+        return `{{ ${binding.runtimeBinding} }}`
+      } else {
+        return `{{ literal ${binding.runtimeBinding} }}`
+      }
+    })
+    const bindingEvauations = processObjectSync(bindingStrings, {
+      ...context,
+      snippets,
+    })
+
+    // Enrich bindings with evaluations and highlighted HTML
+    return bindings.map((binding, idx) => {
       if (!context) {
         return binding
       }
-      const value = getBindingValue(binding, context, snippets)
+      const value = JSON.stringify(bindingEvauations[idx], null, 2)
       return {
         ...binding,
         value,

From 23332756e5c456004216a25e53bcbbee3011788c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 May 2024 13:58:43 +0100
Subject: [PATCH 08/27] Allow role binding evaluations to be displayed now that
 they work

---
 .../src/components/common/bindings/BindingSidePanel.svelte | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 6ef2d35a6c..f364b39ba9 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -75,13 +75,6 @@
     if (!context || !binding.value || binding.value === "") {
       return
     }
-
-    // Roles have always been broken for JS. We need to exclude them from
-    // showing a popover as it will show "Error while executing JS".
-    if (binding.category === "Role") {
-      return
-    }
-
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {

From 1015ec9da2f4d54a1670308f0815c2a53b159ebd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 May 2024 14:32:22 +0100
Subject: [PATCH 09/27] Allow field labels to wrap

---
 packages/client/src/components/app/forms/Field.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index adf5d10df7..690e328cf4 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -126,9 +126,6 @@
     display: flex;
     flex-direction: column;
   }
-  label {
-    white-space: nowrap;
-  }
   label.hidden {
     padding: 0;
   }

From 97e63d9e28cbb1c8fde9d5750ed472dd174140e0 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 28 May 2024 12:53:57 +0200
Subject: [PATCH 10/27] Rename

---
 .../{HideColumnsButton.svelte => ColumnsSettingButton.svelte} | 0
 packages/frontend-core/src/components/grid/layout/Grid.svelte | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/frontend-core/src/components/grid/controls/{HideColumnsButton.svelte => ColumnsSettingButton.svelte} (100%)

diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
similarity index 100%
rename from packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
rename to packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 4fb3747bfd..0628e8232e 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -18,7 +18,7 @@
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "../overlays/KeyboardManager.svelte"
   import SortButton from "../controls/SortButton.svelte"
-  import HideColumnsButton from "../controls/HideColumnsButton.svelte"
+  import ColumnsSettingButton from "../controls/ColumnsSettingButton.svelte"
   import SizeButton from "../controls/SizeButton.svelte"
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
@@ -152,7 +152,7 @@
       <div class="controls-left">
         <slot name="filter" />
         <SortButton />
-        <HideColumnsButton />
+        <ColumnsSettingButton />
         <SizeButton />
         <slot name="controls" />
       </div>

From bc6ead9dee1390e92236aa434fa716e80b26b2bf Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 28 May 2024 12:56:25 +0200
Subject: [PATCH 11/27] Change icon

---
 .../src/components/grid/controls/ColumnsSettingButton.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 5b74e01958..b9beb154ae 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -29,13 +29,13 @@
 
   const getText = columns => {
     const hidden = columns.filter(col => !col.visible).length
-    return hidden ? `Hide columns (${hidden})` : "Hide columns"
+    return hidden ? `Columns (${hidden})` : "Columns"
   }
 </script>
 
 <div bind:this={anchor}>
   <ActionButton
-    icon="VisibilityOff"
+    icon="ColumnSettings"
     quiet
     size="M"
     on:click={() => (open = !open)}

From be2d63497edb0b572358af3aa83e19ca15c16375 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 28 May 2024 16:12:35 +0200
Subject: [PATCH 12/27] Remove toggle all

---
 .../grid/controls/ColumnsSettingButton.svelte      | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index b9beb154ae..6efaed5d96 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -17,16 +17,6 @@
     dispatch(visible ? "show-column" : "hide-column")
   }
 
-  const toggleAll = async visible => {
-    let mutations = {}
-    $columns.forEach(column => {
-      mutations[column.name] = { visible }
-    })
-    datasource.actions.addSchemaMutations(mutations)
-    await datasource.actions.saveSchemaMutations()
-    dispatch(visible ? "show-column" : "hide-column")
-  }
-
   const getText = columns => {
     const hidden = columns.filter(col => !col.visible).length
     return hidden ? `Columns (${hidden})` : "Columns"
@@ -69,10 +59,6 @@
         />
       {/each}
     </div>
-    <div class="buttons">
-      <ActionButton on:click={() => toggleAll(true)}>Show all</ActionButton>
-      <ActionButton on:click={() => toggleAll(false)}>Hide all</ActionButton>
-    </div>
   </div>
 </Popover>
 

From 62e1ba28b2b0a94d6c23912fca88e20b20823b48 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 28 May 2024 17:16:38 +0200
Subject: [PATCH 13/27] Add ToggleActionButtonGroup

---
 .../grid/controls/ColumnsSettingButton.svelte | 37 ++++++++++++++++---
 .../controls/ToggleActionButtonGroup.svelte   | 25 +++++++++++++
 2 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 6efaed5d96..2f3b1df405 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -2,6 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
+  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
@@ -11,8 +12,11 @@
   $: anyHidden = $columns.some(col => !col.visible)
   $: text = getText($columns)
 
-  const toggleColumn = async (column, visible) => {
-    datasource.actions.addSchemaMutation(column.name, { visible })
+  const toggleColumn = async (column, permission) => {
+    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
+    const readonly = permission === PERMISSION_OPTIONS.READONLY
+
+    datasource.actions.addSchemaMutation(column.name, { visible, readonly })
     await datasource.actions.saveSchemaMutations()
     dispatch(visible ? "show-column" : "hide-column")
   }
@@ -21,6 +25,24 @@
     const hidden = columns.filter(col => !col.visible).length
     return hidden ? `Columns (${hidden})` : "Columns"
   }
+
+  const PERMISSION_OPTIONS = {
+    WRITABLE: "writable",
+    READONLY: "readonly",
+    HIDDEN: "hidden",
+  }
+
+  function columnToPermissionOptions(column) {
+    if (!column.visible) {
+      return PERMISSION_OPTIONS.HIDDEN
+    }
+
+    if (column.readonly) {
+      return PERMISSION_OPTIONS.READONLY
+    }
+
+    return PERMISSION_OPTIONS.WRITABLE
+  }
 </script>
 
 <div bind:this={anchor}>
@@ -51,11 +73,14 @@
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <Toggle
-          size="S"
-          value={column.visible}
+        <ToggleActionButtonGroup
           on:change={e => toggleColumn(column, e.detail)}
-          disabled={column.primaryDisplay}
+          value={columnToPermissionOptions(column)}
+          options={[
+            { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
+            { icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
+            { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
+          ]}
         />
       {/each}
     </div>
diff --git a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
new file mode 100644
index 0000000000..647b1af526
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+
+  import { ActionButton } from "@budibase/bbui"
+
+  export let value
+  export let options
+
+  let dispatch = createEventDispatcher()
+  const onClick = value => {
+    dispatch("change", value)
+  }
+</script>
+
+<div>
+  {#each options as option}
+    <ActionButton
+      on:click={() => onClick(option.value)}
+      size="S"
+      icon={option.icon}
+      quiet
+      selected={option.value === value}
+    />
+  {/each}
+</div>

From 4262532cb1cf454c70ccd7fc58eaa1286a3192b2 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 28 May 2024 17:48:50 +0200
Subject: [PATCH 14/27] Fix noPadding and quiet

---
 packages/bbui/src/ActionButton/ActionButton.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index c346e34d54..96969d1435 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -109,16 +109,16 @@
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-gray-500);
   }
-  .noPadding {
-    padding: 0;
-    min-width: 0;
-  }
   .spectrum-ActionButton--quiet {
     padding: 0 8px;
   }
   .spectrum-ActionButton--quiet.is-selected {
     color: var(--spectrum-global-color-gray-900);
   }
+  .noPadding {
+    padding: 0;
+    min-width: 0;
+  }
   .is-selected:not(.emphasized) .spectrum-Icon {
     color: var(--spectrum-global-color-gray-900);
   }

From a689d82b66aefa64aab5c251d3a9d8c7e46e462e Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 15:31:25 +0200
Subject: [PATCH 15/27] Unify components

---
 .../grid/controls/ColumnsSettingButton.svelte | 27 ++++++++++++-------
 .../controls/ToggleActionButtonGroup.svelte   | 25 -----------------
 2 files changed, 17 insertions(+), 35 deletions(-)
 delete mode 100644 packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 2f3b1df405..8fe3854d93 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -2,7 +2,6 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
-  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
@@ -32,6 +31,12 @@
     HIDDEN: "hidden",
   }
 
+  const options = [
+    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
+    { icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
+    { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
+  ]
+
   function columnToPermissionOptions(column) {
     if (!column.visible) {
       return PERMISSION_OPTIONS.HIDDEN
@@ -73,15 +78,17 @@
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <ToggleActionButtonGroup
-          on:change={e => toggleColumn(column, e.detail)}
-          value={columnToPermissionOptions(column)}
-          options={[
-            { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
-            { icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
-            { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
-          ]}
-        />
+        <div>
+          {#each options as option}
+            <ActionButton
+              on:click={() => toggleColumn(column, option.value)}
+              size="S"
+              icon={option.icon}
+              quiet
+              selected={option.value === columnToPermissionOptions(column)}
+            />
+          {/each}
+        </div>
       {/each}
     </div>
   </div>
diff --git a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
deleted file mode 100644
index 647b1af526..0000000000
--- a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-
-  import { ActionButton } from "@budibase/bbui"
-
-  export let value
-  export let options
-
-  let dispatch = createEventDispatcher()
-  const onClick = value => {
-    dispatch("change", value)
-  }
-</script>
-
-<div>
-  {#each options as option}
-    <ActionButton
-      on:click={() => onClick(option.value)}
-      size="S"
-      icon={option.icon}
-      quiet
-      selected={option.value === value}
-    />
-  {/each}
-</div>

From 151ff27351e9ac0422d47933286f82a4fa1b4533 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 15:38:30 +0200
Subject: [PATCH 16/27] Styling

---
 .../grid/controls/ColumnsSettingButton.svelte | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 8fe3854d93..2608eea75f 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -78,7 +78,7 @@
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <div>
+        <div class="permissionPicker">
           {#each options as option}
             <ActionButton
               on:click={() => toggleColumn(column, option.value)}
@@ -86,6 +86,7 @@
               icon={option.icon}
               quiet
               selected={option.value === columnToPermissionOptions(column)}
+              noPadding
             />
           {/each}
         </div>
@@ -101,11 +102,6 @@
     flex-direction: column;
     gap: 12px;
   }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
   .columns {
     display: grid;
     align-items: center;
@@ -118,4 +114,16 @@
     display: flex;
     gap: 8px;
   }
+  .permissionPicker {
+    display: flex;
+    gap: var(--spacing-xs);
+    padding-left: calc(var(--spacing-xl) * 2);
+  }
+
+  .permissionPicker :global(.spectrum-Icon) {
+    width: 14px;
+  }
+  .permissionPicker :global(.spectrum-ActionButton) {
+    width: 22px;
+  }
 </style>

From 06549149b6867acac854751a85aa42c77f64f30f Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 16:01:11 +0200
Subject: [PATCH 17/27] Remove readonly

---
 .../components/grid/controls/ColumnsSettingButton.svelte | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 2608eea75f..c3ce6d2743 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -13,9 +13,8 @@
 
   const toggleColumn = async (column, permission) => {
     const visible = permission !== PERMISSION_OPTIONS.HIDDEN
-    const readonly = permission === PERMISSION_OPTIONS.READONLY
 
-    datasource.actions.addSchemaMutation(column.name, { visible, readonly })
+    datasource.actions.addSchemaMutation(column.name, { visible })
     await datasource.actions.saveSchemaMutations()
     dispatch(visible ? "show-column" : "hide-column")
   }
@@ -27,13 +26,11 @@
 
   const PERMISSION_OPTIONS = {
     WRITABLE: "writable",
-    READONLY: "readonly",
     HIDDEN: "hidden",
   }
 
   const options = [
     { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
-    { icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
     { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
   ]
 
@@ -42,10 +39,6 @@
       return PERMISSION_OPTIONS.HIDDEN
     }
 
-    if (column.readonly) {
-      return PERMISSION_OPTIONS.READONLY
-    }
-
     return PERMISSION_OPTIONS.WRITABLE
   }
 </script>

From 5b42aff1f750f2ae3c175d147e164b183fd46c8b Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 16:21:19 +0200
Subject: [PATCH 18/27] Add picker to sticky columns

---
 .../bbui/src/ActionButton/ActionButton.svelte     |  4 ++++
 .../grid/controls/ColumnsSettingButton.svelte     | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 96969d1435..d3cec0f307 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -57,6 +57,7 @@
     class:fullWidth
     class="spectrum-ActionButton spectrum-ActionButton--size{size}"
     class:active
+    class:disabled
     {disabled}
     on:longPress
     on:click|preventDefault
@@ -122,6 +123,9 @@
   .is-selected:not(.emphasized) .spectrum-Icon {
     color: var(--spectrum-global-color-gray-900);
   }
+  .is-selected.disabled .spectrum-Icon {
+    color: var(--spectrum-global-color-gray-500);
+  }
   .tooltip {
     position: absolute;
     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 c3ce6d2743..2f8e141a61 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -64,7 +64,19 @@
           <Icon size="S" name={getColumnIcon($stickyColumn)} />
           {$stickyColumn.label}
         </div>
-        <Toggle disabled size="S" value={true} />
+
+        <div class="permissionPicker">
+          {#each options as option}
+            <ActionButton
+              disabled
+              size="S"
+              icon={option.icon}
+              quiet
+              selected={option.value === PERMISSION_OPTIONS.WRITABLE}
+              noPadding
+            />
+          {/each}
+        </div>
       {/if}
       {#each $columns as column}
         <div class="column">
@@ -99,6 +111,7 @@
     display: grid;
     align-items: center;
     grid-template-columns: 1fr auto;
+    gap: 8px;
   }
   .columns :global(.spectrum-Switch) {
     margin-right: 0;

From 53968f0725d4b1d9019ebe64e45061b0dd81a79e Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 16:22:32 +0200
Subject: [PATCH 19/27] Copy change

---
 .../src/components/grid/controls/ColumnsSettingButton.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 2f8e141a61..5d398574c3 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -21,7 +21,7 @@
 
   const getText = columns => {
     const hidden = columns.filter(col => !col.visible).length
-    return hidden ? `Columns (${hidden})` : "Columns"
+    return hidden ? `Columns (${hidden} restricted)` : "Columns"
   }
 
   const PERMISSION_OPTIONS = {

From 3d15f71344273796bc13fd68fda52020ba2198d7 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 16:50:07 +0200
Subject: [PATCH 20/27] Break down component

---
 .../grid/controls/ColumnsSettingButton.svelte | 57 ++++++-------------
 .../controls/ToggleActionButtonGroup.svelte   | 41 +++++++++++++
 2 files changed, 59 insertions(+), 39 deletions(-)
 create mode 100644 packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 5d398574c3..0a85e41966 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -1,7 +1,8 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
+  import { ActionButton, Popover, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
+  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
@@ -30,8 +31,12 @@
   }
 
   const options = [
-    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
-    { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
+    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
+    {
+      icon: "VisibilityOff",
+      value: PERMISSION_OPTIONS.HIDDEN,
+      tooltip: "Hidden",
+    },
   ]
 
   function columnToPermissionOptions(column) {
@@ -65,36 +70,22 @@
           {$stickyColumn.label}
         </div>
 
-        <div class="permissionPicker">
-          {#each options as option}
-            <ActionButton
-              disabled
-              size="S"
-              icon={option.icon}
-              quiet
-              selected={option.value === PERMISSION_OPTIONS.WRITABLE}
-              noPadding
-            />
-          {/each}
-        </div>
+        <ToggleActionButtonGroup
+          disabled
+          value={PERMISSION_OPTIONS.WRITABLE}
+          {options}
+        />
       {/if}
       {#each $columns as column}
         <div class="column">
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <div class="permissionPicker">
-          {#each options as option}
-            <ActionButton
-              on:click={() => toggleColumn(column, option.value)}
-              size="S"
-              icon={option.icon}
-              quiet
-              selected={option.value === columnToPermissionOptions(column)}
-              noPadding
-            />
-          {/each}
-        </div>
+        <ToggleActionButtonGroup
+          on:click={e => toggleColumn(column, e.detail)}
+          value={columnToPermissionOptions(column)}
+          {options}
+        />
       {/each}
     </div>
   </div>
@@ -120,16 +111,4 @@
     display: flex;
     gap: 8px;
   }
-  .permissionPicker {
-    display: flex;
-    gap: var(--spacing-xs);
-    padding-left: calc(var(--spacing-xl) * 2);
-  }
-
-  .permissionPicker :global(.spectrum-Icon) {
-    width: 14px;
-  }
-  .permissionPicker :global(.spectrum-ActionButton) {
-    width: 22px;
-  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
new file mode 100644
index 0000000000..4c82da9e21
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+
+  let dispatch = createEventDispatcher()
+
+  import { ActionButton } from "@budibase/bbui"
+
+  export let value
+  export let options
+  export let disabled
+</script>
+
+<div class="permissionPicker">
+  {#each options as option}
+    <ActionButton
+      on:click={() => dispatch("click", option.value)}
+      {disabled}
+      size="S"
+      icon={option.icon}
+      quiet
+      selected={option.value === value}
+      noPadding
+      tooltip={option.tooltip}
+    />
+  {/each}
+</div>
+
+<style>
+  .permissionPicker {
+    display: flex;
+    gap: var(--spacing-xs);
+    padding-left: calc(var(--spacing-xl) * 2);
+  }
+
+  .permissionPicker :global(.spectrum-Icon) {
+    width: 14px;
+  }
+  .permissionPicker :global(.spectrum-ActionButton) {
+    width: 22px;
+  }
+</style>

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 21/27] 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}

From 8b22beb0a204baa91fd298cb3d23748d61c9759c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 30 May 2024 10:07:17 +0200
Subject: [PATCH 22/27] Use AbsTooltip

---
 .../controls/ToggleActionButtonGroup.svelte   | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
index 4c82da9e21..4f83f069d3 100644
--- a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
@@ -3,7 +3,7 @@
 
   let dispatch = createEventDispatcher()
 
-  import { ActionButton } from "@budibase/bbui"
+  import { ActionButton, AbsTooltip, TooltipType } from "@budibase/bbui"
 
   export let value
   export let options
@@ -12,16 +12,17 @@
 
 <div class="permissionPicker">
   {#each options as option}
-    <ActionButton
-      on:click={() => dispatch("click", option.value)}
-      {disabled}
-      size="S"
-      icon={option.icon}
-      quiet
-      selected={option.value === value}
-      noPadding
-      tooltip={option.tooltip}
-    />
+    <AbsTooltip text={option.tooltip} type={TooltipType.Info}>
+      <ActionButton
+        on:click={() => dispatch("click", option.value)}
+        {disabled}
+        size="S"
+        icon={option.icon}
+        quiet
+        selected={option.value === value}
+        noPadding
+      />
+    </AbsTooltip>
   {/each}
 </div>
 

From a672c0089931e14eda859c00661d338d9791fbeb Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 30 May 2024 10:07:47 +0200
Subject: [PATCH 23/27] Copy changes

---
 .../src/components/grid/controls/ColumnsSettingButton.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 1c8a8ec6a0..7ba746da33 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: "Writeable" },
+    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
     {
       icon: "VisibilityOff",
       value: PERMISSION_OPTIONS.HIDDEN,

From b5a036509784576e00555f4a6e25479fc3e60863 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 30 May 2024 10:11:04 +0200
Subject: [PATCH 24/27] Remove new overflow setting

---
 packages/bbui/src/Popover/Popover.svelte                     | 5 -----
 .../src/components/grid/controls/ColumnsSettingButton.svelte | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 05d8af1693..aa811afe1e 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -27,7 +27,6 @@
   export let clickOutsideOverride = false
   export let resizable = true
   export let wrap = false
-  export let overflow = false
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -105,7 +104,6 @@
       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 }}
@@ -124,9 +122,6 @@
     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 7ba746da33..0a85e41966 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -61,7 +61,7 @@
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align="left" overflow>
+<Popover bind:open {anchor} align="left">
   <div class="content">
     <div class="columns">
       {#if $stickyColumn}

From adcda035ed9dc736a68b61f6a0809ff44022e344 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 30 May 2024 10:11:11 +0200
Subject: [PATCH 25/27] Change size

---
 .../components/grid/controls/ToggleActionButtonGroup.svelte    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
index 4f83f069d3..e705b5016d 100644
--- a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
@@ -37,6 +37,7 @@
     width: 14px;
   }
   .permissionPicker :global(.spectrum-ActionButton) {
-    width: 22px;
+    width: 28px;
+    height: 28px;
   }
 </style>

From 7b4304d4a2ebace99dbaa01d3c46caedfb7cfb1c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 30 May 2024 09:11:42 +0100
Subject: [PATCH 26/27] Force wrapping long words in field labels

---
 packages/client/src/components/app/forms/Field.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 690e328cf4..74ff5442a9 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -126,6 +126,9 @@
     display: flex;
     flex-direction: column;
   }
+  label {
+    word-wrap: break-word;
+  }
   label.hidden {
     padding: 0;
   }

From 19a422ca1ccf7accf621728aeb1995a3dd8b28fc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 30 May 2024 09:14:56 +0100
Subject: [PATCH 27/27] Typo

---
 packages/frontend-core/src/components/grid/stores/rows.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 5140a7da8b..d354dfd9b3 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -404,7 +404,7 @@ export const createActions = context => {
 
     // Save change
     try {
-      // Incremenet change count for this row
+      // Increment change count for this row
       inProgressChanges.update(state => ({
         ...state,
         [rowId]: (state[rowId] || 0) + 1,