cleanup

apps/web/src/components/keyboard-shortcuts-help.tsx

@@ -56,9 +56,9 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
           <div key={index} className="flex items-center gap-1">
             <div className="flex items-center">
               {key.split("+").map((keyPart: string, partIndex: number) => (
-                <kbd key={partIndex} className="shortcut-key">
+                <ShortcutKey key={partIndex}>
                   {getKeyWithModifier(keyPart)}
-                </kbd>
+                </ShortcutKey>
               ))}
             </div>
             {index < displayKeys.length - 1 && (
@@ -119,3 +119,17 @@ export const KeyboardShortcutsHelp = () => {
     </Dialog>
   );
 };
+
+function ShortcutKey({ children }: { children: React.ReactNode }) {
+  return (
+    <kbd 
+      className="inline-flex font-sans text-xs rounded px-2 min-w-[1.5rem] min-h-[1.5rem] leading-none items-center justify-center shadow-sm border mr-1"
+      style={{
+        backgroundColor: "rgba(0, 0, 0, 0.2)",
+        borderColor: "rgba(255, 255, 255, 0.1)"
+      }}
+    >
+      {children}
+    </kbd>
+  );
+};