diff --git a/web/shared/icons/mac-command.svg b/web/shared/icons/mac-command.svg
new file mode 100644
index 0000000000..b44109c1b7
--- /dev/null
+++ b/web/shared/icons/mac-command.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/src/templates.ts b/web/src/templates.ts
index e866d036d1..c58b8fec8c 100644
--- a/web/src/templates.ts
+++ b/web/src/templates.ts
@@ -157,7 +157,12 @@ Handlebars.registerHelper("popover_hotkey_hints", (...args) => {
common.adjust_mac_hotkey_hints(hotkeys);
const shift_hotkey_exists = common.adjust_shift_hotkey(hotkeys);
for (const hotkey of hotkeys) {
- hotkey_hints += ``;
+ // The ⌘ symbol isn't vertically centered, so we use an icon.
+ if (hotkey === "⌘") {
+ hotkey_hints += ``;
+ } else {
+ hotkey_hints += ``;
+ }
}
if (shift_hotkey_exists) {
return new Handlebars.SafeString(
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 536bb383d1..bea05dc57a 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1131,6 +1131,7 @@ textarea.new_message_textarea {
.popover-menu-hotkey-hint {
padding: 2px 5px;
+ display: flex;
}
}
diff --git a/web/tests/templates.test.cjs b/web/tests/templates.test.cjs
index 6efc63383a..ccc2961d9c 100644
--- a/web/tests/templates.test.cjs
+++ b/web/tests/templates.test.cjs
@@ -2,8 +2,12 @@
const assert = require("node:assert/strict");
+const {set_global, with_overrides} = require("./lib/namespace.cjs");
const {run_test} = require("./lib/test.cjs");
+const navigator = {};
+set_global("navigator", navigator);
+
/*
Note that the test runner automatically registers
all of our handlers.
@@ -65,6 +69,21 @@ run_test("popover_hotkey_hints", () => {
assert.equal(html, expected_html);
});
+run_test("popover_hotkey_hints mac command", () => {
+ const args = {
+ hotkey_one: "Ctrl",
+ hotkey_two: "[",
+ };
+
+ with_overrides(({override}) => {
+ override(navigator, "platform", "MacIntel");
+ const html = require("./templates/popover_hotkey_hints.hbs")(args);
+ const expected_html =
+ '\n';
+ assert.equal(html, expected_html);
+ });
+});
+
run_test("popover_hotkey_hints_shift_hotkey", () => {
const args = {
hotkey_one: "Shift",