Update text cells, number cells, long form field cells and relationship cells to respect row height

packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte

@@ -111,6 +111,7 @@
     width={column.width}
     left={column.left}
     defaultHeight
+    center
   >
     <Icon
       size="S"

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

@@ -56,6 +56,7 @@
     value={value || ""}
     on:change={handleChange}
     on:wheel|stopPropagation
+    spellcheck="false"
   />
 {:else}
   <div class="long-form-cell" on:click={editable ? open : null} class:editable>
@@ -68,19 +69,21 @@
 <style>
   .long-form-cell {
     flex: 1 1 auto;
-    padding: 0 var(--cell-padding);
+    padding: var(--cell-padding);
     align-self: stretch;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     overflow: hidden;
   }
   .long-form-cell.editable:hover {
     cursor: text;
   }
   .value {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--content-lines);
+    -webkit-box-orient: vertical;
     overflow: hidden;
-    text-overflow: ellipsis;
+    line-height: 19px;
-    white-space: nowrap;
   }
   textarea {
     padding: var(--cell-padding);
@@ -98,6 +101,7 @@
     z-index: 1;
     border-radius: 2px;
     resize: none;
+    line-height: 19px;
   }
   textarea.invertX {
     left: auto;

packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte

@@ -289,7 +289,7 @@
     min-height: var(--row-height);
     max-height: var(--row-height);
     overflow: hidden;
-    --max-relationship-height: 94px;
+    --max-relationship-height: 92px;
   }
   .wrapper.focused {
     position: absolute;
@@ -330,15 +330,15 @@
     justify-content: flex-start;
     align-items: flex-start;
     flex: 1 1 auto;
-    gap: var(--cell-spacing);
+    grid-column-gap: var(--cell-spacing);
-    grid-row-gap: 7px;
+    grid-row-gap: var(--cell-padding);
     overflow: hidden;
-    padding: 7px var(--cell-padding);
+    padding: var(--cell-padding);
     flex-wrap: wrap;
   }
   .badge {
     flex: 0 0 auto;
-    padding: 2px var(--cell-padding);
+    padding: 0 var(--cell-padding);
     background: var(--color);
     border-radius: var(--cell-padding);
     user-select: none;
@@ -348,6 +348,7 @@
     display: flex;
     align-items: center;
     gap: var(--cell-spacing);
+    height: 20px;
   }
   .focused .badge span:hover {
     cursor: pointer;
@@ -368,8 +369,7 @@
     position: absolute;
     top: 100%;
     left: 0;
-    min-width: 100%;
+    width: 100%;
-    max-width: calc(100% + var(--max-cell-render-width-overflow));
     height: calc(
       var(--max-cell-render-height) + var(--row-height) -
         var(--max-relationship-height)

packages/frontend-core/src/components/sheet/cells/SheetCell.svelte

@@ -7,6 +7,7 @@
   export let error = null
   export let rowIdx
   export let defaultHeight = false
+  export let center = false
 
   $: style = getStyle(width, selectedUser)
 
@@ -25,6 +26,7 @@
   class:highlighted
   class:focused
   class:error
+  class:center
   class:default-height={defaultHeight}
   class:selected-other={selectedUser != null}
   on:focus
@@ -57,7 +59,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
     color: var(--spectrum-global-color-gray-800);
     font-size: var(--cell-font-size);
     gap: var(--cell-spacing);
@@ -69,6 +71,9 @@
   .cell.default-height {
     height: var(--default-row-height);
   }
+  .cell.center {
+    align-items: center;
+  }
 
   /* Cell border */
   .cell.focused:after,

packages/frontend-core/src/components/sheet/cells/TextCell.svelte

@@ -48,23 +48,42 @@
     on:change={handleChange}
   />
 {:else}
-  <div class="text-cell">
+  <div class="text-cell" class:number={type === "number"}>
-    {value || ""}
+    <div class="value">
+      {value || ""}
+    </div>
   </div>
 {/if}
 
 <style>
   .text-cell {
-    padding: 0 var(--cell-padding);
+    flex: 1 1 auto;
+    padding: var(--cell-padding);
+    align-self: stretch;
+    display: flex;
+    align-items: flex-start;
     overflow: hidden;
-    text-overflow: ellipsis;
+  }
-    white-space: nowrap;
+  .text-cell.editable:hover {
+    cursor: text;
+  }
+  .text-cell.number {
+    justify-content: flex-end;
+  }
+  .value {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--content-lines);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 19px;
+  }
+  .number .value {
+    -webkit-line-clamp: 1;
   }
   input {
     flex: 1 1 auto;
     border: none;
-    padding: 0;
+    padding: var(--cell-padding);
-    margin: 0 var(--cell-padding);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -76,4 +95,17 @@
   input:focus {
     outline: none;
   }
+  input[type="number"] {
+    text-align: right;
+  }
+
+  /* Hide arrows for number fields */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 </style>

packages/frontend-core/src/components/sheet/controls/RowHeightButton.svelte

@@ -1,21 +1,25 @@
 <script>
   import { getContext } from "svelte"
   import { ActionButton, Popover } from "@budibase/bbui"
-  import { DefaultRowHeight } from "../lib/constants"
+  import {
+    LargeRowHeight,
+    MediumRowHeight,
+    SmallRowHeight,
+  } from "../lib/constants"
 
   const { rowHeight, loaded } = getContext("sheet")
   const sizeOptions = [
     {
       label: "Small",
-      size: DefaultRowHeight,
+      size: SmallRowHeight,
     },
     {
       label: "Medium",
-      size: 65,
+      size: MediumRowHeight,
     },
     {
       label: "Large",
-      size: 94,
+      size: LargeRowHeight,
     },
   ]
 

packages/frontend-core/src/components/sheet/layout/Sheet.svelte

@@ -62,7 +62,8 @@
   context = attachStores(context)
 
   // Reference some stores for local use
-  const { isResizing, isReordering, ui, loaded, rowHeight } = context
+  const { isResizing, isReordering, ui, loaded, rowHeight, contentLines } =
+    context
 
   // Keep stores up to date
   $: tableIdStore.set(tableId)
@@ -90,7 +91,7 @@
   id="sheet-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px;"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
 >
   <div class="controls">
     <div class="controls-left">
@@ -145,7 +146,7 @@
     /* Variables */
     --cell-background: var(--spectrum-global-color-gray-50);
     --cell-background-hover: var(--spectrum-global-color-gray-100);
-    --cell-padding: 10px;
+    --cell-padding: 8px;
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
     --cell-font-size: 14px;

packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte

@@ -58,7 +58,7 @@
   class:scrolled={$scrollLeft > 0}
 >
   <div class="header row">
-    <SheetCell width={GutterWidth} defaultHeight>
+    <SheetCell width={GutterWidth} defaultHeight center>
       <div class="gutter">
         <div class="checkbox visible">
           {#if $config.allowDeleteRows}

packages/frontend-core/src/components/sheet/lib/constants.js

@@ -6,4 +6,7 @@ export const GutterWidth = 72
 export const DefaultColumnWidth = 200
 export const DefaultRelationshipColumnWidth = 360
 export const MinColumnWidth = 100
-export const DefaultRowHeight = 36
+export const SmallRowHeight = 36
+export const MediumRowHeight = 64
+export const LargeRowHeight = 92
+export const DefaultRowHeight = SmallRowHeight

packages/frontend-core/src/components/sheet/stores/ui.js

@@ -1,4 +1,9 @@
 import { writable, get, derived } from "svelte/store"
+import {
+  LargeRowHeight,
+  MediumRowHeight,
+  SmallRowHeight,
+} from "../lib/constants"
 
 export const createStores = () => {
   const focusedCellId = writable(null)
@@ -35,6 +40,7 @@ export const deriveStores = context => {
     hoveredRowId,
     enrichedRows,
     rowLookupMap,
+    rowHeight,
   } = context
 
   // Derive the row that contains the selected cell
@@ -62,8 +68,18 @@ export const deriveStores = context => {
     hoveredRowId.set(null)
   }
 
+  const contentLines = derived(rowHeight, $rowHeight => {
+    if ($rowHeight === LargeRowHeight) {
+      return 4
+    } else if ($rowHeight === MediumRowHeight) {
+      return 2
+    }
+    return 1
+  })
+
   return {
     focusedRow,
+    contentLines,
     ui: {
       actions: {
         blur,