From 19d3ead108a4413bad768118d9951c1fb2a4835f Mon Sep 17 00:00:00 2001
From: Yelsin Sepulveda <Yelsinsepulveda@gmail.com>
Date: Mon, 12 Jan 2026 07:07:43 -0500
Subject: [PATCH] fix[desktop]: Improve UX for ExtensionItem component (#6443)

Signed-off-by: Yelsin Sepulveda <yelsinsepulveda@gmail.com>
---
 .../extensions/subcomponents/ExtensionItem.tsx      | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx b/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx
index 92663222..3c9f4343 100644
--- a/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx
+++ b/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx
@@ -75,20 +75,20 @@ export default function ExtensionItem({
   return (
     <Card
       id={`extension-${kebabCase(extension.name)}`}
-      className="transition-all duration-200 hover:shadow-default hover:cursor-pointer min-h-[120px] overflow-hidden"
-      onClick={() => handleToggle(extension)}
+      className="transition-all duration-200 min-h-[120px] overflow-hidden"
     >
       <CardHeader>
         <CardTitle>{getFriendlyTitle(extension)}</CardTitle>
 
-        <CardAction onClick={(e) => e.stopPropagation()}>
+        <CardAction>
           <div className="flex items-center justify-end gap-2">
             {editable && (
               <button
                 className="text-textSubtle hover:text-textStandard"
-                onClick={() => (onConfigure ? onConfigure(extension) : () => {})}
+                aria-label={`Configure ${getFriendlyTitle(extension)} Extension`}
+                onClick={() => onConfigure?.(extension)}
               >
-                <Gear className="h-4 w-4" />
+                <Gear className="w-4 h-4" />
               </button>
             )}
             <Switch
@@ -96,11 +96,12 @@ export default function ExtensionItem({
               onCheckedChange={() => handleToggle(extension)}
               disabled={isToggling}
               variant="mono"
+              aria-label={`Toggle ${getFriendlyTitle(extension)} extension On or Off`}
             />
           </div>
         </CardAction>
       </CardHeader>
-      <CardContent className="px-4 text-sm text-text-muted overflow-hidden break-words">
+      <CardContent className="px-4 overflow-hidden text-sm break-words text-text-muted">
         {renderSubtitle()}
       </CardContent>
     </Card>