fix(react/global_menu): styling and layout of keyboard shortcuts

apps/client/src/widgets/react/KeyboardShortcut.tsx

@@ -2,11 +2,14 @@ import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/common
 import { useEffect, useState } from "preact/hooks";
 import keyboard_actions from "../../services/keyboard_actions";
 import { joinElements } from "./react_utils";
+import utils from "../../services/utils";
 
 interface KeyboardShortcutProps {
     actionName: KeyboardActionNames;
 }
 
+const isMobile = utils.isMobile();
+
 export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) {
 
     const [ action, setAction ] = useState<ActionKeyboardShortcut>();
@@ -18,17 +21,14 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps)
         return <></>;
     }
 
-    return (
-        <>
-            {action.effectiveShortcuts?.map((shortcut) => {
+    return (!isMobile &&
+        <span className="keyboard-shortcut">
+            {joinElements(action.effectiveShortcuts?.map((shortcut) => {
                 const keys = shortcut.split("+");
-                return joinElements(keys
-                    .map((key, i) => (
-                        <>
-                            <kbd>{key}</kbd> {i + 1 < keys.length && "+ "}
-                        </>
-                    )))
-            })}
-        </>
+                return joinElements(
+                    keys.map((key, i) => <kbd>{key}</kbd>)
+                , "+");
+            }))}
+        </span>
     );
 }

apps/client/src/widgets/react/react_utils.tsx

@@ -41,7 +41,9 @@ export function disposeReactWidget(container: Element) {
     render(null, container);
 }
 
-export function joinElements(components: ComponentChild[], separator = ", ") {
+export function joinElements(components: ComponentChild[] | undefined, separator = ", ") {
+    if (!components) return <></>;
+
     const joinedComponents: ComponentChild[] = [];
     for (let i=0; i<components.length; i++) {
         joinedComponents.push(components[i]);
@@ -50,5 +52,5 @@ export function joinElements(components: ComponentChild[], separator = ", ") {
         }
     }
 
-    return joinedComponents;
+    return <>{joinedComponents}</>;
 }