Reduce xAI logo size to fit properly within circle

Author: jack

ui/desktop/src/components/settings/providers/modal/subcomponents/ProviderLogo.tsx

@@ -32,19 +32,24 @@ export default function ProviderLogo({ providerName }: ProviderLogoProps) {
   const logoKey = providerName.toLowerCase();
   const logo = providerLogos[logoKey] || DefaultLogo;
 
-  // Apply invert filter for xAI logo since it's black on transparent
-  const imageStyle = logoKey === 'xai' 
-    ? { 
-        filter: 'invert(1)', 
-        opacity: 0.9 
-      } 
-    : {};
+  // Special handling for xAI logo
+  const isXai = logoKey === 'xai';
+  const imageStyle = isXai ? { filter: 'invert(1)', opacity: 0.9 } : {};
+  
+  // Use smaller size for xAI logo to fit better in circle
+  const imageClassName = isXai 
+    ? "w-8 h-8 object-contain"  // Smaller size for xAI
+    : "w-16 h-16 object-contain"; // Default size for others
 
   return (
     <div className="flex justify-center mb-2">
       <div className="w-12 h-12 bg-black rounded-full overflow-hidden flex items-center justify-center">
-        <img src={logo} alt={`${providerName} logo`} className="w-16 h-16 object-contain" 
-             style={imageStyle} />
+        <img 
+          src={logo} 
+          alt={`${providerName} logo`} 
+          className={imageClassName}
+          style={imageStyle} 
+        />
       </div>
     </div>
   );