Allow tooltip to wrap for long combo hotkeys

Replace whitespace-nowrap with max-w-[88px] and text-center so
3-key combos like Ctrl+Shift+K wrap gracefully within the 96px
overlay window. Remove unused formatHotkeyCompact symbol approach.

Author: gabrielste1n

src/App.jsx

@@ -5,7 +5,7 @@ import { X } from "lucide-react";
 import { useToast } from "./components/ui/Toast";
 import { LoadingDots } from "./components/ui/LoadingDots";
 import { useHotkey } from "./hooks/useHotkey";
-import { formatHotkeyCompact } from "./utils/hotkeys";
+import { formatHotkeyLabel } from "./utils/hotkeys";
 import { useWindowDrag } from "./hooks/useWindowDrag";
 import { useAudioRecording } from "./hooks/useAudioRecording";
 import { useSettingsStore } from "./stores/settingsStore";
@@ -57,7 +57,7 @@ const Tooltip = ({ children, content, emoji }) => {
         {children}
       </div>
       {isVisible && (
-        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-1.5 py-1 text-[10px] text-popover-foreground bg-popover border border-border rounded-md whitespace-nowrap z-10 shadow-lg transition-opacity duration-150">
+        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-1.5 py-1 text-[10px] text-popover-foreground bg-popover border border-border rounded-md z-10 shadow-lg transition-opacity duration-150 max-w-[88px] text-center leading-tight">
           {emoji && <span className="mr-1">{emoji}</span>}
           {content}
           <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-2 border-transparent border-t-popover"></div>
@@ -277,7 +277,7 @@ export default function App() {
       case "hover":
         return {
           className: `${baseClasses} bg-black/50 cursor-pointer`,
-          tooltip: formatHotkeyCompact(hotkey),
+          tooltip: formatHotkeyLabel(hotkey),
         };
       case "recording":
         return {

src/utils/hotkeys.ts

@@ -37,24 +37,6 @@ function formatModifierPart(part: string, platform: Platform): string {
   }
 }
 
-const MODIFIER_SYMBOLS: Record<string, string> = {
-  CommandOrControl: "⌘",
-  Command: "⌘",
-  Cmd: "⌘",
-  Control: "⌃",
-  Ctrl: "⌃",
-  Alt: "⌥",
-  Option: "⌥",
-  Shift: "⇧",
-  Super: "⌘",
-  Meta: "⌘",
-  Fn: "Fn",
-};
-
-function formatModifierSymbol(part: string): string {
-  return MODIFIER_SYMBOLS[part] ?? part;
-}
-
 /**
  * Formats an Electron accelerator string into a user-friendly display label.
  *
@@ -73,26 +55,6 @@ export function formatHotkeyLabel(hotkey?: string | null): string {
   return formatHotkeyLabelForPlatform(resolvedHotkey, platform);
 }
 
-/**
- * Compact hotkey label using symbols on macOS (e.g., "⌘⇧K") and short text elsewhere.
- * Designed for tight UI spaces like the 96px overlay tooltip.
- */
-export function formatHotkeyCompact(hotkey?: string | null): string {
-  const platform = getPlatform();
-  const resolvedHotkey = hotkey && hotkey.trim() !== "" ? hotkey : getDefaultHotkey();
-
-  if (!resolvedHotkey || resolvedHotkey.trim() === "") return "";
-  if (isGlobeLikeHotkey(resolvedHotkey)) return "Globe/Fn";
-
-  if (platform === "darwin" && resolvedHotkey.includes("+")) {
-    const parts = resolvedHotkey.split("+");
-    const symbols = parts.map((p) => formatModifierSymbol(p));
-    return symbols.join("");
-  }
-
-  return formatHotkeyLabelForPlatform(resolvedHotkey, platform);
-}
-
 export function formatHotkeyLabelForPlatform(hotkey: string, platform: Platform): string {
   if (!hotkey || hotkey.trim() === "") {
     return "";