Merge pull request #36210 from overleaf/ab-fix-focus-mode-shortcut-linux

[web] Fix Focus mode shortcut showing Mac control glyph on non-Mac platforms

GitOrigin-RevId: d2f9f068ab9a2585813fbb777a6ab4fb41d386a2

services/web/frontend/js/features/ide-react/components/toolbar/change-layout-options.tsx

@@ -107,7 +107,7 @@ const shortcuts: Record<LayoutOption, string[] | null> = isMac
       pdfOnly: null,
       sideBySide: null,
       detachedPdf: null,
-      focusMode: ['⌃', '⇧', 'M'],
+      focusMode: ['Ctrl', 'Shift', 'M'],
     }
 
 export default function ChangeLayoutOptions() {

services/web/frontend/js/shared/components/shortcut.tsx

@@ -1,17 +1,8 @@
-import classNames from 'classnames'
-
 export function Shortcut({ keys }: { keys: string[] }) {
   return (
-    <span>
+    <span className="dropdown-shortcut">
       {keys.map((key, idx) => (
-        <span
-          className={classNames({
-            'dropdown-shortcut-char': key.length === 1,
-          })}
-          key={`${key}${idx}`}
-        >
-          {key}
-        </span>
+        <span key={`${key}${idx}`}>{key}</span>
       ))}
     </span>
   )

services/web/frontend/stylesheets/components/dropdown-menu.scss

@@ -310,10 +310,9 @@ $dropdown-item-min-height: 36px;
   justify-content: space-between;
 }
 
-.dropdown-shortcut-char {
-  display: inline-block;
-  width: 1em;
-  text-align: center;
+.dropdown-shortcut {
+  display: inline-flex;
+  gap: var(--spacing-02);
 }
 
 .dropdown-item-wide {