style: Center the ⌘ symbol by replacing it with an icon.

This commit updates the keyboard shortcuts UI by replacing
the ⌘ symbol with a more symmetrically aligned icon.

Fixes: #32926

web/src/common.ts

@@ -58,6 +58,14 @@ export function adjust_mac_kbd_tags(kbd_elem_class: string): void {
             const $kbd_elem = $("<kbd>").text(following_key);
             $(this).after($("<span>").text(" + ").contents(), $kbd_elem);
         }
+
+        // The ⌘ symbol isn't vertically centered, so we use an icon.
+        if (key_text === "⌘") {
+            const $icon = $("<i>")
+                .addClass("zulip-icon zulip-icon-mac-command")
+                .attr("aria-label", key_text);
+            $(this).empty().append($icon); // Use .append() to safely add the icon
+        }
     });
 }
 

web/styles/app_components.css

@@ -32,10 +32,20 @@ kbd {
     background-color: var(--color-kbd-background);
     color: var(--color-kbd-text);
     margin: 0.25em 0.1em;
-    padding: 0.1em 0.4em;
+    padding: 0.2em 0.4em;
     text-shadow: 0 1px 0 hsl(0deg 0% 100%);
     /* Prevent selection */
     user-select: none;
+    position: relative;
+    min-height: 1em;
+    min-width: 1em;
+
+    .zulip-icon::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
 }
 
 @media (width < $sm_min) {