From ed6ff33933bd00fe0d350242dd4fd289e13215e3 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 8 Mar 2026 22:33:07 +0530
Subject: [PATCH] refactor: update ShortcutKbd component styling to adjust key
 width based on key length

---
 surfsense_web/components/ui/shortcut-kbd.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/surfsense_web/components/ui/shortcut-kbd.tsx b/surfsense_web/components/ui/shortcut-kbd.tsx
index bf2d3e307..e65c4b586 100644
--- a/surfsense_web/components/ui/shortcut-kbd.tsx
+++ b/surfsense_web/components/ui/shortcut-kbd.tsx
@@ -13,7 +13,10 @@ export function ShortcutKbd({ keys, className }: ShortcutKbdProps) {
 			{keys.map((key) => (
 				<kbd
 					key={key}
-					className="inline-flex size-[18px] items-center justify-center rounded-[4px] bg-white/[0.18] font-sans text-[11px] leading-none"
+					className={cn(
+						"inline-flex h-[18px] items-center justify-center rounded-[4px] bg-white/[0.18] font-sans text-[11px] leading-none",
+						key.length > 1 ? "px-1" : "w-[18px]"
+					)}
 				>
 					{key}
 				</kbd>