fix: BROS-843: Fix hotkey styles in tooltips (#9575)

Co-authored-by: AndrejOros <andrej.oros@heartex.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: AndrejOros <AndrejOros@users.noreply.github.com>

Author: 3 people

web/libs/editor/src/components/App/App.scss

@@ -91,6 +91,9 @@ body {
 }
 
 .key-group {
+  display: inline-flex;
+  align-items: center;
+
   &__key {
     padding: 0 4px;
     height: 16px;

web/libs/editor/src/core/Hotkey.ts

@@ -462,15 +462,21 @@ Hotkey.Tooltip = inject("store")(
 
       if (enabled) {
         shortcut.split(",").forEach((combination: string) => {
-          const keys = combination.split("+").map((key: string) =>
-            createElement(
-              "kbd",
-              {
-                className: cn("hotkey").elem("key").toClassName(),
-              },
-              key,
-            ),
-          );
+          const keyParts = combination.split("+");
+          const keys: JSX.Element[] = [];
+
+          keyParts.forEach((key: string, i: number) => {
+            keys.push(
+              createElement(
+                "kbd",
+                {
+                  className: cn("key-group").elem("key").toClassName(),
+                  key: `key-${i}`,
+                },
+                key,
+              ),
+            );
+          });
 
           hotkeys.push(
             createElement(