Update scroll styles and z-index

packages/frontend-core/src/components/sheet/ScrollOverlay.svelte

@@ -7,6 +7,7 @@
 
   // Bar config
   const barOffset = 4
+  const padding = 180
 
   // State for dragging bars
   let initialMouse
@@ -20,25 +21,25 @@
 
   // Calculate V scrollbar size and offset
   // Terminology is the same for both axes:
-  //   contentX - the size of the rendered content
+  //   contentX - the size of the rendered content, including padding
   //   renderX - the space available to render the bar in, edge to edge
   //   barX - the length of the bar
   //   availX - the space available to render the bar in, until the edge
   //   barX - the offset of the bar
-  $: contentHeight = ($rows.length + 1) * cellHeight
+  $: contentHeight = ($rows.length + 1) * cellHeight + padding
   $: renderHeight = height - 2 * barOffset
   $: barHeight = Math.max(50, (height / contentHeight) * renderHeight)
   $: availHeight = renderHeight - barHeight
-  $: maxScrollTop = Math.max(contentHeight - height + 180, 0)
+  $: maxScrollTop = Math.max(contentHeight - height, 0)
   $: barTop = barOffset + cellHeight + availHeight * (scrollTop / maxScrollTop)
 
   // Calculate H scrollbar size and offset
-  $: contentWidth = calculateContentWidth($columns, $stickyColumn)
+  $: contentWidth = calculateContentWidth($columns, $stickyColumn) + padding
   $: totalWidth = width + 40 + $stickyColumn?.width || 0
   $: renderWidth = totalWidth - 2 * barOffset
   $: barWidth = Math.max(50, (totalWidth / contentWidth) * renderWidth)
   $: availWidth = renderWidth - barWidth
-  $: maxScrollLeft = Math.max(contentWidth - totalWidth + 180, 0)
+  $: maxScrollLeft = Math.max(contentWidth - totalWidth, 0)
   $: barLeft = barOffset + availWidth * (scrollLeft / maxScrollLeft)
 
   // Calculate whether to show scrollbars or not

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

@@ -117,7 +117,7 @@
     display: flex;
     flex-direction: row;
     justify-items: flex-start;
-    align-items: stretch;
+    align-items: flex-start;
     overflow: hidden;
     height: 0;
     position: relative;
@@ -127,5 +127,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    align-self: stretch;
   }
 </style>

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

@@ -68,7 +68,7 @@
     background: var(--background);
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
-    z-index: 10;
+    z-index: 25;
     border-bottom: none;
   }
   .cell.header :global(> span) {

packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte

@@ -18,22 +18,68 @@
 
   $: scrollTop = $scroll.top
   $: scrollLeft = $scroll.left
-  $: offsetY = scrollVertically ? -1 * (scrollTop % cellHeight) : 0
+  $: offsetY = -1 * (scrollTop % cellHeight)
   $: hiddenWidths = calculateHiddenWidths($visibleColumns)
-  $: offsetX = scrollHorizontally ? -1 * scrollLeft + hiddenWidths : 0
+  $: offsetX = -1 * scrollLeft + hiddenWidths
   $: rowCount = $visibleRows.length
   $: contentWidth = calculateContentWidth($visibleColumns, scrollHorizontally)
   $: contentHeight = calculateContentHeight(rowCount, scrollVertically)
-  $: style = getStyle(offsetX, offsetY, contentWidth, contentHeight)
+  $: innerStyle = getInnerStyle(
+    offsetX,
+    offsetY,
+    contentWidth,
+    contentHeight,
+    scrollHorizontally,
+    scrollVertically
+  )
+  $: outerStyle = getOuterStyle(
+    offsetX,
+    offsetY,
+    contentWidth,
+    contentHeight,
+    scrollHorizontally,
+    scrollVertically
+  )
 
-  const getStyle = (offsetX, offsetY, contentWidth, contentHeight) => {
-    let style = `--offset-y:${offsetY}px; --offset-x:${offsetX}px;`
-    if (contentWidth) {
-      style += `--width:${contentWidth}px;`
+  const getInnerStyle = (
+    offsetX,
+    offsetY,
+    contentWidth,
+    contentHeight,
+    scrollH,
+    scrollV
+  ) => {
+    if (!scrollH) {
+      offsetX = 0
     }
-    if (contentHeight) {
-      style += `--height:${contentHeight}px;`
+    if (!scrollV) {
+      offsetY = 0
     }
+    let style = `--offset-x:${offsetX}px;--offset-y:${offsetY}px;`
+    // if (scrollH && contentWidth) {
+    //   style += `width:${contentWidth}px;`
+    // }
+    // if (scrollV && contentHeight) {
+    //   style += `height:${contentHeight}px;`
+    // }
+    return style
+  }
+
+  const getOuterStyle = (
+    offsetX,
+    offsetY,
+    contentWidth,
+    contentHeight,
+    scrollH,
+    scrollV
+  ) => {
+    let style = ""
+    // if (scrollV) {
+    //   style += `height:${contentHeight + offsetY}px;`
+    // }
+    // if (scrollH) {
+    //   style += `width:${contentWidth + offsetX}px;`
+    // }
     return style
   }
 
@@ -87,20 +133,20 @@
   }
 </script>
 
-<div on:wheel|passive={wheelInteractive ? handleWheel : null}>
-  <div class="scroll-wrapper" {style}>
+<div class="outer" on:wheel|passive={wheelInteractive ? handleWheel : null}>
+  <div class="inner" style={innerStyle}>
     <slot />
   </div>
 </div>
 
 <style>
   div {
+  }
+  .outer {
     min-width: 100%;
     min-height: 100%;
   }
-  .scroll-wrapper {
+  .inner {
     transform: translate3d(var(--offset-x), var(--offset-y), 0);
-    width: var(--width);
-    height: var(--height);
   }
 </style>

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

@@ -152,20 +152,26 @@
 
 <style>
   .sticky-column {
-    flex: 0 0 var(--width);
-    z-index: 20;
-    overflow: visible;
-    border-right: var(--cell-border);
-  }
-  .sticky-column.scrolled {
-    box-shadow: 1px -4px 8px rgba(0, 0, 0, 0.1);
+    flex: 0 0 calc(var(--width) + 0px);
   }
   .sticky-column :global(.cell) {
-    border-right-width: 0;
+    z-index: 26;
+  }
+  .sticky-column.scrolled {
+  }
+  .sticky-column.scrolled :global(.cell:not(.label):after) {
+    content: " ";
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    left: 100%;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
   }
 
   .header {
     border-bottom: var(--cell-border);
+    position: relative;
+    z-index: 1;
   }
   .row {
     display: flex;