Update JSON, boolean and date cells to respect row height

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

@@ -35,7 +35,7 @@
 
 <style>
   .boolean-cell {
-    padding: 0 var(--cell-padding);
+    padding: 2px var(--cell-padding);
     pointer-events: none;
   }
   .boolean-cell.editable {

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

@@ -48,7 +48,7 @@
 
 <style>
   .container {
-    padding: 0 var(--cell-padding);
+    padding: var(--cell-padding);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -62,6 +62,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    line-height: 20px;
   }
   .picker {
     position: absolute;

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

@@ -83,7 +83,7 @@
     -webkit-line-clamp: var(--content-lines);
     -webkit-box-orient: vertical;
     overflow: hidden;
-    line-height: 19px;
+    line-height: 20px;
   }
   textarea {
     padding: var(--cell-padding);
@@ -101,7 +101,7 @@
     z-index: 1;
     border-radius: 2px;
     resize: none;
-    line-height: 19px;
+    line-height: 20px;
   }
   textarea.invertX {
     left: auto;

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

@@ -83,7 +83,9 @@
       {@const color = getOptionColor(val)}
       {#if color}
         <div class="badge text" style="--color: {color}">
-          {val}
+          <span>
+            {val}
+          </span>
         </div>
       {:else}
         <div class="text">
@@ -131,9 +133,10 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: stretch;
+    align-items: flex-start;
     align-self: stretch;
     flex: 1 1 auto;
+    overflow: hidden;
   }
   .container.editable:hover {
     cursor: pointer;
@@ -142,12 +145,13 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
     flex: 1 1 auto;
-    width: 0;
+    grid-column-gap: var(--cell-spacing);
-    gap: var(--cell-spacing);
+    grid-row-gap: var(--cell-padding);
     overflow: hidden;
-    padding: 0 var(--cell-padding);
+    padding: var(--cell-padding);
+    flex-wrap: wrap;
   }
   .text {
     overflow: hidden;
@@ -158,10 +162,20 @@
     flex: 0 0 auto;
   }
   .badge {
-    padding: 2px var(--cell-padding);
+    padding: 0 var(--cell-padding);
     background: var(--color);
     border-radius: var(--cell-padding);
     user-select: none;
+    display: flex;
+    align-items: center;
+    gap: var(--cell-spacing);
+    height: 20px;
+    max-width: 100%;
+  }
+  .badge span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
   .arrow {
     position: absolute;
@@ -210,9 +224,6 @@
     gap: var(--cell-spacing);
     background-color: var(--cell-background-hover);
   }
-  .option:first-child {
-    flex: 0 0 calc(var(--row-height) - 1px);
-  }
   .option:hover,
   .option.focused {
     background-color: var(--spectrum-global-color-gray-200);

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

@@ -249,7 +249,7 @@
           placeholder={primaryDisplay ? `Search by ${primaryDisplay}` : null}
         />
       </div>
-      {#if searchResults}
+      {#if searchString && searchResults}
         <div class="info">
           {searchResults.length} row{searchResults.length === 1 ? "" : "s"} found
         </div>
@@ -265,7 +265,9 @@
               on:mouseenter={() => (candidateIndex = idx)}
             >
               <div class="badge">
-                {row.primaryDisplay}
+                <span>
+                  {row.primaryDisplay}
+                </span>
               </div>
               {#if isRowSelected(row)}
                 <Icon
@@ -342,13 +344,16 @@
     background: var(--color);
     border-radius: var(--cell-padding);
     user-select: none;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     display: flex;
     align-items: center;
     gap: var(--cell-spacing);
     height: 20px;
+    max-width: 100%;
+  }
+  .badge span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
   .focused .badge span:hover {
     cursor: pointer;

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

@@ -75,7 +75,7 @@
     -webkit-line-clamp: var(--content-lines);
     -webkit-box-orient: vertical;
     overflow: hidden;
-    line-height: 19px;
+    line-height: 20px;
   }
   .number .value {
     -webkit-line-clamp: 1;
@@ -91,6 +91,7 @@
     font-size: var(--cell-font-size);
     font-family: var(--font-sans);
     color: inherit;
+    line-height: 20px;
   }
   input:focus {
     outline: none;

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

@@ -4,7 +4,6 @@ export const MaxCellRenderWidthOverflow = 200
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
-export const DefaultRelationshipColumnWidth = 360
 export const MinColumnWidth = 100
 export const SmallRowHeight = 36
 export const MediumRowHeight = 64

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

@@ -1,16 +1,6 @@
 import { derived, get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import {
+import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
-  GutterWidth,
-  DefaultColumnWidth,
-  DefaultRelationshipColumnWidth,
-} from "../lib/constants"
-
-export const getDefaultColumnWidth = column => {
-  return column?.schema?.type === "link"
-    ? DefaultRelationshipColumnWidth
-    : DefaultColumnWidth
-}
 
 export const createStores = () => {
   const columns = writable([])
@@ -86,12 +76,10 @@ export const deriveStores = context => {
       // Copy over metadata
       if (column === $stickyColumn?.name) {
         newSchema[column].visible = true
-        newSchema[column].width =
+        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
-          $stickyColumn.width || getDefaultColumnWidth($stickyColumn)
       } else {
         newSchema[column].visible = $columns[index]?.visible ?? true
-        newSchema[column].width =
+        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
-          $columns[index]?.width || getDefaultColumnWidth($columns[index])
       }
     })
 
@@ -155,9 +143,7 @@ export const initialise = context => {
         .map(field => ({
           name: field,
           schema: schema[field],
-          width:
+          width: schema[field].width || DefaultColumnWidth,
-            schema[field].width ||
-            getDefaultColumnWidth({ schema: schema[field].type }),
           visible: schema[field].visible ?? true,
           order: schema[field].order,
         }))
@@ -195,12 +181,9 @@ export const initialise = context => {
     if (!existing && currentStickyColumn?.name === primaryDisplay) {
       existing = currentStickyColumn
     }
-    const defaultWidth = getDefaultColumnWidth({
-      schema: schema[primaryDisplay],
-    })
     stickyColumn.set({
       name: primaryDisplay,
-      width: schema[primaryDisplay].width || defaultWidth,
+      width: schema[primaryDisplay].width || DefaultColumnWidth,
       left: GutterWidth,
       schema: schema[primaryDisplay],
       idx: "sticky",

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

@@ -1,6 +1,5 @@
 import { writable, get, derived } from "svelte/store"
-import { getDefaultColumnWidth } from "./columns"
+import { MinColumnWidth, DefaultColumnWidth } from "../lib/constants"
-import { MinColumnWidth } from "../lib/constants"
 
 const initialState = {
   initialMouseX: null,
@@ -98,16 +97,15 @@ export const deriveStores = context => {
   // Resets a column size back to default
   const resetSize = async column => {
     const $stickyColumn = get(stickyColumn)
-    const width = getDefaultColumnWidth(column)
     if (column.name === $stickyColumn?.name) {
       stickyColumn.update(state => ({
         ...state,
-        width,
+        width: DefaultColumnWidth,
       }))
     } else {
       columns.update(state => {
         const columnIdx = state.findIndex(x => x.name === column.name)
-        state[columnIdx].width = width
+        state[columnIdx].width = DefaultColumnWidth
         return [...state]
       })
     }

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

@@ -70,7 +70,7 @@ export const deriveStores = context => {
 
   const contentLines = derived(rowHeight, $rowHeight => {
     if ($rowHeight === LargeRowHeight) {
-      return 4
+      return 3
     } else if ($rowHeight === MediumRowHeight) {
       return 2
     }