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

apps/client/src/stylesheets/style.css

@@ -437,14 +437,18 @@ body #context-menu-container .dropdown-item > span {
     align-items: center;
 }
 
-.dropdown-menu kbd {
+.dropdown-item span.keyboard-shortcut {
     flex-grow: 1;
     text-align: right;
+}
+
+.dropdown-menu kbd {    
     color: var(--muted-text-color);
     border: none;
     background-color: transparent;
     box-shadow: none;
     padding-bottom: 0;
+    padding: 0;
 }
 
 .dropdown-item,

apps/client/src/stylesheets/theme-next/base.css

@@ -197,13 +197,17 @@ html body .dropdown-item[disabled] {
 
 /* Menu item keyboard shortcut */
 .dropdown-item kbd {
-    margin-left: 16px;
     font-family: unset !important;
     font-size: unset !important;
     color: var(--menu-item-keyboard-shortcut-color) !important;
     padding-top: 0;
 }
 
+.dropdown-item span.keyboard-shortcut {
+    color: var(--menu-item-keyboard-shortcut-color) !important;
+    margin-left: 16px;
+}
+
 .dropdown-divider {
     position: relative;
     border-color: transparent !important;

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}</>;
 }