From 91b2f4165db9155a5b5d2d45357ab8bbf53a5156 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 25 Apr 2023 14:28:18 +0100
Subject: [PATCH] Make it more obvious that multi select cells have overflow
 when using small line height

---
 .../src/components/grid/cells/DataCell.svelte          |  2 ++
 .../src/components/grid/cells/OptionsCell.svelte       | 10 +++++++++-
 .../src/components/grid/layout/GridRow.svelte          |  2 ++
 .../src/components/grid/layout/StickyColumn.svelte     |  2 ++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index 5a2e02340f..59e81b3081 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -19,6 +19,7 @@
   export let updateValue = rows.actions.updateValue
   export let invertX = false
   export let invertY = false
+  export let contentLines = 1
 
   const emptyError = writable(null)
 
@@ -84,5 +85,6 @@
     {readonly}
     {invertY}
     {invertX}
+    {contentLines}
   />
 </GridCell>
diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
index f3b6b9b59d..9be26d9520 100644
--- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
@@ -12,6 +12,7 @@
   export let api
   export let invertX = false
   export let invertY = false
+  export let contentLines
 
   let isOpen = false
   let focusedOptionIdx = null
@@ -86,7 +87,11 @@
   class:open
   on:click|self={editable ? open : null}
 >
-  <div class="values" on:click={editable ? open : null}>
+  <div
+    class="values"
+    class:wrap={contentLines > 1}
+    on:click={editable ? open : null}
+  >
     {#each values as val}
       {@const color = getOptionColor(val)}
       {#if color}
@@ -160,6 +165,9 @@
     grid-row-gap: var(--cell-padding);
     overflow: hidden;
     padding: var(--cell-padding);
+    flex-wrap: nowrap;
+  }
+  .values.wrap {
     flex-wrap: wrap;
   }
   .text {
diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
index eb1fd8b96a..ff182d4ec2 100644
--- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
@@ -15,6 +15,7 @@
     selectedCellMap,
     focusedRow,
     columnHorizontalInversionIndex,
+    contentLines,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
@@ -44,6 +45,7 @@
       focused={$focusedCellId === cellId}
       selectedUser={$selectedCellMap[cellId]}
       width={column.width}
+      contentLines={$contentLines}
     />
   {/each}
 </div>
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index 6f10c30695..44be0777cf 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -21,6 +21,7 @@
     focusedRow,
     scrollLeft,
     dispatch,
+    contentLines,
   } = getContext("grid")
 
   $: rowCount = $rows.length
@@ -85,6 +86,7 @@
               selectedUser={$selectedCellMap[cellId]}
               width={$stickyColumn.width}
               column={$stickyColumn}
+              contentLines={$contentLines}
             />
           {/if}
         </div>