From b07e5095e950be18bafc69103d8c98dd1b5d392c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 28 Apr 2023 11:13:40 +0100
Subject: [PATCH] Increase support for lower resolutions in the grid UI by
 using tooltips instead of text for some buttons at low horizontal breakpoints

---
 .../buttons/ExistingRelationshipButton.svelte          |  2 +-
 .../components/grid/controls/ColumnWidthButton.svelte  |  7 ++++---
 .../components/grid/controls/HideColumnsButton.svelte  |  7 ++++---
 .../components/grid/controls/RowHeightButton.svelte    |  7 ++++---
 .../src/components/grid/controls/SortButton.svelte     |  7 ++++---
 .../src/components/grid/layout/Grid.svelte             |  5 +++--
 .../frontend-core/src/components/grid/stores/ui.js     | 10 ++++++++++
 7 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
index 3d837a54f0..0f4bafb001 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
@@ -39,7 +39,7 @@
 {#if datasource}
   <div>
     <ActionButton icon="DataCorrelated" primary quiet on:click={modal.show}>
-      Define existing relationship
+      Define relationship
     </ActionButton>
   </div>
   <Modal bind:this={modal}>
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
index 754aebbb51..5ffd968d30 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
@@ -3,7 +3,7 @@
   import { ActionButton, Popover } from "@budibase/bbui"
   import { DefaultColumnWidth } from "../lib/constants"
 
-  const { stickyColumn, columns } = getContext("grid")
+  const { stickyColumn, columns, compact } = getContext("grid")
   const smallSize = 120
   const mediumSize = DefaultColumnWidth
   const largeSize = DefaultColumnWidth * 1.5
@@ -59,12 +59,13 @@
     on:click={() => (open = !open)}
     selected={open}
     disabled={!allCols.length}
+    tooltip={$compact ? "Width" : null}
   >
-    Width
+    {$compact ? "" : "Width"}
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align="left">
+<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
   <div class="content">
     {#each sizeOptions as option}
       <ActionButton
diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
index 30904fbebc..79a773347b 100644
--- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle } from "@budibase/bbui"
 
-  const { columns, stickyColumn } = getContext("grid")
+  const { columns, stickyColumn, compact } = getContext("grid")
 
   let open = false
   let anchor
@@ -47,12 +47,13 @@
     on:click={() => (open = !open)}
     selected={open || anyHidden}
     disabled={!$columns.length}
+    tooltip={$compact ? "Columns" : ""}
   >
-    Columns
+    {$compact ? "" : "Columns"}
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align="left">
+<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
   <div class="content">
     <div class="columns">
       {#if $stickyColumn}
diff --git a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte b/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
index e9045ac5c7..e9617ce0b6 100644
--- a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
@@ -7,7 +7,7 @@
     SmallRowHeight,
   } from "../lib/constants"
 
-  const { rowHeight, columns, table } = getContext("grid")
+  const { rowHeight, columns, table, compact } = getContext("grid")
   const sizeOptions = [
     {
       label: "Small",
@@ -41,12 +41,13 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open}
+    tooltip={$compact ? "Height" : null}
   >
-    Height
+    {$compact ? "" : "Height"}
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align="left">
+<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
   <div class="content">
     {#each sizeOptions as option}
       <ActionButton
diff --git a/packages/frontend-core/src/components/grid/controls/SortButton.svelte b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
index bd75249216..2018e83e44 100644
--- a/packages/frontend-core/src/components/grid/controls/SortButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Select } from "@budibase/bbui"
 
-  const { sort, columns, stickyColumn } = getContext("grid")
+  const { sort, columns, stickyColumn, compact } = getContext("grid")
 
   let open = false
   let anchor
@@ -90,12 +90,13 @@
     on:click={() => (open = !open)}
     selected={open}
     disabled={!columnOptions.length}
+    tooltip={$compact ? "Sort" : ""}
   >
-    Sort
+    {$compact ? "" : "Sort"}
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align="left">
+<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
   <div class="content">
     <Select
       placeholder={null}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 36a3802164..0db7ec9108 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -112,10 +112,10 @@
       <AddRowButton />
       <AddColumnButton />
       <slot name="controls" />
+      <SortButton />
+      <HideColumnsButton />
       <ColumnWidthButton />
       <RowHeightButton />
-      <HideColumnsButton />
-      <SortButton />
     </div>
     <div class="controls-right">
       <DeleteButton />
@@ -214,6 +214,7 @@
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
     background: var(--background);
+    z-index: 2;
   }
   .controls-left,
   .controls-right {
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index 0636400d59..85afad8a90 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -2,6 +2,7 @@ import { writable, get, derived } from "svelte/store"
 import { tick } from "svelte"
 import {
   DefaultRowHeight,
+  GutterWidth,
   LargeRowHeight,
   MediumRowHeight,
   NewRowID,
@@ -43,6 +44,8 @@ export const deriveStores = context => {
     enrichedRows,
     rowLookupMap,
     rowHeight,
+    stickyColumn,
+    width,
   } = context
 
   // Derive the row that contains the selected cell
@@ -70,6 +73,7 @@ export const deriveStores = context => {
     hoveredRowId.set(null)
   }
 
+  // Derive the amount of content lines to show in cells depending on row height
   const contentLines = derived(rowHeight, $rowHeight => {
     if ($rowHeight === LargeRowHeight) {
       return 3
@@ -79,9 +83,15 @@ export const deriveStores = context => {
     return 1
   })
 
+  // Derive whether we should use the compact UI, depending on width
+  const compact = derived([stickyColumn, width], ([$stickyColumn, $width]) => {
+    return ($stickyColumn?.width || 0) + $width + GutterWidth < 1100
+  })
+
   return {
     focusedRow,
     contentLines,
+    compact,
     ui: {
       actions: {
         blur,