diff --git a/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte b/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte
new file mode 100644
index 0000000000..5024a24ea7
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte
@@ -0,0 +1,53 @@
+
+
+
+ {#each parsedKeys as key}
+
+ {key}
+
+ {/each}
+
+
+
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index 607dc9e1f0..71c390c946 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -7,6 +7,7 @@
import { GutterWidth } from "../lib/constants"
import { NewRowID } from "../lib/constants"
import GutterCell from "../cells/GutterCell.svelte"
+ import KeyboardShortcut from "./KeyboardShortcut.svelte"
const {
hoveredRowId,
@@ -209,8 +210,18 @@
{/if}
@@ -261,6 +272,14 @@
top: calc(var(--row-height) + var(--offset) + 24px);
left: var(--gutter-width);
}
+ .button-with-keys {
+ display: flex;
+ gap: 6px;
+ align-items: center;
+ }
+ .button-with-keys :global(> div) {
+ padding-top: 2px;
+ }
/* Sticky column styles */
.sticky-column {
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index 44be0777cf..6301112110 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -7,6 +7,7 @@
import HeaderCell from "../cells/HeaderCell.svelte"
import { GutterWidth, BlankRowID } from "../lib/constants"
import GutterCell from "../cells/GutterCell.svelte"
+ import KeyboardShortcut from "./KeyboardShortcut.svelte"
const {
rows,
@@ -105,7 +106,9 @@
+ >
+
+
{/if}
{/if}