fix: kbd font

Author: izadoesdev

apps/dashboard/app/globals.css

@@ -356,6 +356,12 @@
   --font-mono:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     "Courier New", monospace;
+  
+  /* Font stack for kbd elements with better symbol support */
+  --font-kbd:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
 
   --radius: 0.35rem;
   --radius-sm: 0.375rem;
@@ -454,6 +460,12 @@
   --font-mono:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     "Courier New", monospace;
+  
+  /* Font stack for kbd elements with better symbol support */
+  --font-kbd:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   --radius: 0.35rem;
   --radius-sm: 0.375rem;
   --radius-md: 0.5rem;
@@ -518,6 +530,13 @@
     max-width: 65ch;
   }
 
+  /* Ensure kbd elements use fonts with good symbol support */
+  kbd {
+    font-family: var(--font-kbd);
+    font-weight: 500;
+    letter-spacing: 0.025em;
+  }
+
 }
 
 /* ==========================================================================

apps/dashboard/components/charts/range-selection-popup.tsx

@@ -103,7 +103,7 @@ export function RangeSelectionPopup({
 							weight="duotone"
 						/>
 						<span className="flex-1 text-foreground">Zoom to range</span>
-						<kbd className="rounded border bg-accent px-1.5 py-0.5 font-mono text-[10px] text-foreground">
+						<kbd className="rounded border bg-accent px-1.5 py-0.5 text-[10px] text-foreground">
 							Z
 						</kbd>
 					</button>
@@ -117,7 +117,7 @@ export function RangeSelectionPopup({
 							weight="duotone"
 						/>
 						<span className="flex-1 text-foreground">Add annotation…</span>
-						<kbd className="rounded border bg-accent px-1.5 py-0.5 font-mono text-[10px] text-foreground">
+						<kbd className="rounded border bg-accent px-1.5 py-0.5 text-[10px] text-foreground">
 							A
 						</kbd>
 					</button>

apps/dashboard/components/ui/keyboard-shortcuts.tsx

@@ -85,7 +85,7 @@ export function KeyboardShortcuts({
 									<span className="text-muted-foreground text-sm">
 										{shortcut.label}
 									</span>
-									<kbd className="rounded border bg-secondary px-1.5 py-0.5 font-mono text-xs">
+									<kbd className="rounded border bg-secondary px-1.5 py-0.5 text-xs">
 										{displayKeys}
 									</kbd>
 								</div>