Fix keyboard shortcuts

enso-org · Jun 20, 2024 · bf13234 · bf13234
1 parent 2dee3f0
commit bf13234
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Text/Text.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Text/Text.tsx
@@ -66,16 +66,16 @@ export const TEXT_STYLE = twv.tv({
     },
     truncate: {
       /* eslint-disable @typescript-eslint/naming-convention */
-      '1': 'truncate ellipsis w-full',
-      '2': 'line-clamp-2 ellipsis w-full',
-      '3': 'line-clamp-3 ellipsis w-full',
-      '4': 'line-clamp-4 ellipsis w-full',
-      '5': 'line-clamp-5 ellipsis w-full',
-      '6': 'line-clamp-6 ellipsis w-full',
-      '7': 'line-clamp-7 ellipsis w-full',
-      '8': 'line-clamp-8 ellipsis w-full',
-      '9': 'line-clamp-9 ellipsis w-full',
-      custom: 'line-clamp-[var(--line-clamp)] ellipsis w-full',
+      '1': 'truncate ellipsis',
+      '2': 'line-clamp-2 ellipsis',
+      '3': 'line-clamp-3 ellipsis',
+      '4': 'line-clamp-4 ellipsis',
+      '5': 'line-clamp-5 ellipsis',
+      '6': 'line-clamp-6 ellipsis',
+      '7': 'line-clamp-7 ellipsis',
+      '8': 'line-clamp-8 ellipsis',
+      '9': 'line-clamp-9 ellipsis',
+      custom: 'line-clamp-[var(--line-clamp)] ellipsis',
       /* eslint-enable @typescript-eslint/naming-convention */
     },
     monospace: { true: 'font-mono' },

diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/KeyboardShortcut.tsx b/app/ide-desktop/lib/dashboard/src/components/dashboard/KeyboardShortcut.tsx
@@ -16,6 +16,7 @@ import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as aria from '#/components/aria'
+import * as ariaComponents from '#/components/AriaComponents'
 import SvgMask from '#/components/SvgMask'
 
 import * as inputBindingsModule from '#/utilities/inputBindings'
@@ -26,9 +27,9 @@ import * as tailwindMerge from '#/utilities/tailwindMerge'
 // ========================
 
 /** The size (both width and height) of key icons. */
-const ICON_SIZE_PX = 13
+const ICON_SIZE_PX = '1.5cap'
 
-const ICON_STYLE = { width: ICON_SIZE_PX, height: ICON_SIZE_PX }
+const ICON_STYLE = { width: ICON_SIZE_PX, height: ICON_SIZE_PX, marginTop: '0.1cap' }
 
 /** Props for values of {@link MODIFIER_JSX}. */
 interface InternalModifierProps {
@@ -124,24 +125,24 @@ export default function KeyboardShortcut(props: KeyboardShortcutProps) {
       .sort(inputBindingsModule.compareModifiers)
       .map(inputBindingsModule.toModifierKey)
     return (
-      <aria.Text
+      <div
         className={tailwindMerge.twMerge(
-          'flex h-text items-center',
+          'flex items-center',
           detect.isOnMacOS() ? 'gap-modifiers-macos' : 'gap-modifiers'
         )}
       >
         {modifiers.map(
           modifier =>
             MODIFIER_JSX[detect.platform()][modifier]?.({ getText }) ?? (
-              <aria.Text key={modifier} className="text">
+              <ariaComponents.Text key={modifier}>
                 {getText(MODIFIER_TO_TEXT_ID[modifier])}
-              </aria.Text>
+              </ariaComponents.Text>
             )
         )}
-        <aria.Text className="text">
+        <ariaComponents.Text>
           {shortcut.key === ' ' ? 'Space' : KEY_CHARACTER[shortcut.key] ?? shortcut.key}
-        </aria.Text>
-      </aria.Text>
+        </ariaComponents.Text>
+      </div>
     )
   }
 }
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/Settings.tsx b/app/ide-desktop/lib/dashboard/src/layouts/Settings.tsx
@@ -121,7 +121,7 @@ export default function Settings(props: SettingsProps) {
         <ariaComponents.Text
           variant="h1"
           truncate="1"
-          className="rounded-full bg-frame px-2.5"
+          className="ml-2.5 max-w-lg rounded-full bg-frame px-2.5"
           aria-hidden
         >
           {settingsTab !== SettingsTab.organization &&