Make quiet table even quieter

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 { BlankRowID } from "../lib/constants"
 
   const {
     renderedRows,
@@ -17,6 +18,7 @@
     isDragging,
     buttonColumnWidth,
     showVScrollbar,
+    dispatch,
   } = getContext("grid")
 
   let container
@@ -89,6 +91,17 @@
           </GridCell>
         </div>
       {/each}
+      <div
+        class="row blank"
+        on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
+        on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+      >
+        <GridCell
+          width={$buttonColumnWidth}
+          highlighted={$hoveredRowId === BlankRowID}
+          on:click={() => dispatch("add-row-inline")}
+        />
+      </div>
     </GridScrollWrapper>
   </div>
 </div>
@@ -129,8 +142,11 @@
     align-items: center;
     gap: 4px;
   }
+  .blank :global(.cell:hover) {
+    cursor: pointer;
+  }
 
-  /* Add left cell border */
+  /* Add left cell border to all cells */
   .button-column :global(.cell) {
     border-left: var(--cell-border);
   }

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -354,8 +354,13 @@
     transition: none;
   }
 
-  /* Overrides */
+  /* Overrides for quiet */
-  .grid.quiet :global(.grid-data-content .row > .cell:not(:last-child)) {
+  .grid.quiet :global(.grid-data-content .row .cell:not(:last-child)),
+  .grid.quiet :global(.sticky-column .row .cell),
+  .grid.quiet :global(.new-row .cell:not(:last-child)) {
     border-right: none;
   }
+  .grid.quiet :global(.sticky-column:before) {
+    display: none;
+  }
 </style>

packages/frontend-core/src/components/grid/layout/GridBody.svelte

@@ -2,6 +2,7 @@
   import { getContext, onMount } from "svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import GridRow from "./GridRow.svelte"
+  import GridCell from "../cells/GridCell.svelte"
   import { BlankRowID } from "../lib/constants"
   import ButtonColumn from "./ButtonColumn.svelte"
 
@@ -46,7 +47,6 @@
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div bind:this={body} class="grid-body">
   <GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
     {#each $renderedRows as row, idx}
@@ -54,13 +54,16 @@
     {/each}
     {#if $config.canAddRows}
       <div
-        class="blank"
+        class="row blank"
-        class:highlighted={$hoveredRowId === BlankRowID}
-        style="width:{columnsWidth}px"
         on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
         on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+      >
+        <GridCell
+          width={columnsWidth}
+          highlighted={$hoveredRowId === BlankRowID}
           on:click={() => dispatch("add-row-inline")}
         />
+      </div>
     {/if}
   </GridScrollWrapper>
   {#if $props.buttons?.length}
@@ -76,15 +79,13 @@
     overflow: hidden;
     flex: 1 1 auto;
   }
-  .blank {
+  .row {
-    height: var(--row-height);
+    display: flex;
-    background: var(--cell-background);
+    flex-direction: row;
-    border-bottom: var(--cell-border);
+    justify-content: flex-start;
-    border-right: var(--cell-border);
+    align-items: stretch;
-    position: absolute;
   }
-  .blank.highlighted {
+  .blank :global(.cell:hover) {
-    background: var(--cell-background-hover);
     cursor: pointer;
   }
 </style>

packages/frontend-core/src/components/grid/layout/NewRow.svelte

@@ -177,13 +177,14 @@
 <!-- Only show new row functionality if we have any columns -->
 {#if visible}
   <div
-    class="container"
+    class="new-row"
     class:floating={offset > 0}
     style="--offset:{offset}px; --sticky-width:{width}px;"
   >
     <div class="underlay sticky" transition:fade|local={{ duration: 130 }} />
     <div class="underlay" transition:fade|local={{ duration: 130 }} />
     <div class="sticky-column" transition:fade|local={{ duration: 130 }}>
+      <div class="row">
         <GutterCell expandable on:expand={addViaModal} rowHovered>
           <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
           {#if isAdding}
@@ -211,6 +212,7 @@
           </DataCell>
         {/if}
       </div>
+    </div>
     <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
       <GridScrollWrapper scrollHorizontally attachHandlers>
         <div class="row">
@@ -276,7 +278,7 @@
     margin-left: -6px;
   }
 
-  .container {
+  .new-row {
     position: absolute;
     top: var(--default-row-height);
     left: 0;
@@ -286,10 +288,10 @@
     flex-direction: row;
     align-items: stretch;
   }
-  .container :global(.cell) {
+  .new-row :global(.cell) {
     --cell-background: var(--spectrum-global-color-gray-75) !important;
   }
-  .container.floating :global(.cell) {
+  .new-row.floating :global(.cell) {
     height: calc(var(--row-height) + 1px);
     border-top: var(--cell-border);
   }

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

@@ -66,7 +66,6 @@
 
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="content">
   <GridScrollWrapper scrollVertically attachHandlers>
     {#each $renderedRows as row, idx}
       {@const rowSelected = !!$selectedRows[row._id]}
@@ -100,10 +99,8 @@
     {/each}
     {#if $config.canAddRows}
       <div
-          class="row new"
+        class="row blank"
-          on:mouseenter={$isDragging
+        on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
-            ? null
-            : () => ($hoveredRowId = BlankRowID)}
         on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
         on:click={() => dispatch("add-row-inline")}
       >
@@ -122,7 +119,6 @@
     {/if}
   </GridScrollWrapper>
 </div>
-</div>
 
 <style>
   .sticky-column {
@@ -174,11 +170,7 @@
     justify-content: flex-start;
     align-items: stretch;
   }
-  .content {
+  .blank :global(.cell:hover) {
-    position: relative;
-    flex: 1 1 auto;
-  }
-  .row.new :global(*:hover) {
     cursor: pointer;
   }
 </style>