From b40e2cdc1b9c456ff7983567b1a72c57c03c1e92 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 14 Jul 2026 11:19:56 -0700
Subject: [PATCH] Fix keyboard shortcut help layout (#509)

---
 .../components/core/HotkeyList.test.tsx       | 25 +++++++++++++++++++
 .../components/core/HotkeyList.tsx            |  5 +++-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 apps/yaak-client/components/core/HotkeyList.test.tsx

diff --git a/apps/yaak-client/components/core/HotkeyList.test.tsx b/apps/yaak-client/components/core/HotkeyList.test.tsx
new file mode 100644
index 00000000..47d99f4b
--- /dev/null
+++ b/apps/yaak-client/components/core/HotkeyList.test.tsx
@@ -0,0 +1,25 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test, vi } from "vite-plus/test";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { HotkeyList } from "./HotkeyList";
+
+vi.mock("./Hotkey", () => ({
+  Hotkey: ({ action }: { action: HotkeyAction }) =>
+    action === "sidebar.selected.move" ? null : <span>{action}</span>,
+}));
+
+vi.mock("./HotkeyLabel", () => ({
+  HotkeyLabel: ({ action }: { action: HotkeyAction }) => <span>{action}</span>,
+}));
+
+describe("HotkeyList", () => {
+  test("keeps a grid cell for actions without a shortcut", () => {
+    const markup = renderToStaticMarkup(
+      <HotkeyList hotkeys={["sidebar.selected.move", "request.send"]} />,
+    );
+
+    expect(markup).toContain(
+      '<span>sidebar.selected.move</span><div class="ml-4"></div><span>request.send</span>',
+    );
+  });
+});
diff --git a/apps/yaak-client/components/core/HotkeyList.tsx b/apps/yaak-client/components/core/HotkeyList.tsx
index 202dd059..91f90254 100644
--- a/apps/yaak-client/components/core/HotkeyList.tsx
+++ b/apps/yaak-client/components/core/HotkeyList.tsx
@@ -18,7 +18,10 @@ export const HotkeyList = ({ hotkeys, bottomSlot, className }: Props) => {
         {hotkeys.map((hotkey) => (
           <Fragment key={hotkey}>
             <HotkeyLabel className="truncate" action={hotkey} />
-            <Hotkey className="ml-4" action={hotkey} />
+            {/* Keep this grid cell when Hotkey renders nothing so later rows stay aligned. */}
+            <div className="ml-4">
+              <Hotkey action={hotkey} />
+            </div>
           </Fragment>
         ))}
         {bottomSlot}