Update delete button and allow horizontal scrolling

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

@@ -1,5 +1,5 @@
 <script>
-  import { Modal, ModalContent, Button } from "@budibase/bbui"
+  import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
   import { getContext } from "svelte"
 
   const { selectedRows, rows } = getContext("sheet")
@@ -25,9 +25,9 @@
 
 {#if selectedRowCount}
   <div class="delete-button">
-    <Button icon="Delete" size="M" cta on:click={modal.show}>
+    <ActionButton icon="Delete" size="S" on:click={modal.show}>
       Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
-    </Button>
+    </ActionButton>
   </div>
 {/if}
 
@@ -46,16 +46,11 @@
 
 <style>
   .delete-button {
-    position: absolute;
-    bottom: 30px;
-    right: 30px;
   }
-  .delete-button :global(.spectrum-Button) {
-    background: var(--spectrum-global-color-red-400);
+  .delete-button :global(.spectrum-ActionButton *) {
+    color: var(--spectrum-global-color-red-400);
+  }
+  .delete-button :global(.spectrum-ActionButton) {
     border-color: var(--spectrum-global-color-red-400);
   }
-  .delete-button :global(.spectrum-Button:hover) {
-    background: var(--spectrum-global-color-red-500);
-    border-color: var(--spectrum-global-color-red-500);
-  }
 </style>

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

@@ -95,6 +95,7 @@
       <slot name="controls" />
     </div>
     <div class="controls-right">
+      <DeleteButton />
       <UserAvatars />
     </div>
   </div>
@@ -104,7 +105,6 @@
       <HeaderRow />
       <SheetBody />
     </div>
-    <DeleteButton />
     <ResizeOverlay />
     <ScrollOverlay />
   </div>
@@ -177,4 +177,7 @@
     align-items: center;
     gap: var(--cell-spacing);
   }
+  .controls-right {
+    gap: 12px;
+  }
 </style>

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

@@ -44,7 +44,10 @@
   // Handles a wheel even and updates the scroll offsets
   const handleWheel = e => {
     e.preventDefault()
-    debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
+    const modifier = e.ctrlKey || e.metaKey
+    let x = modifier ? e.deltaY : e.deltaX
+    let y = modifier ? e.deltaX : e.deltaY
+    debouncedHandleWheel(x, y, e.clientY)
   }
   const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
     // Calculate new scroll top