improve cert restart button style

messages/en-US.json

@@ -1596,7 +1596,7 @@
     "initialSetupDescription": "Create the intial server admin account. Only one server admin can exist. You can always change these credentials later.",
     "createAdminAccount": "Create Admin Account",
     "setupErrorCreateAdmin": "An error occurred while creating the server admin account.",
-    "certificateStatus": "Certificate Status",
+    "certificateStatus": "Certificate",
     "loading": "Loading",
     "loadingAnalytics": "Loading Analytics",
     "restart": "Restart",

src/components/CertificateStatus.tsx

@@ -117,6 +117,8 @@ export default function CertificateStatus({
         );
     }
 
+    const isPending = cert.status === "pending";
+
     return (
         <div className={`flex items-center gap-2 ${className}`}>
             {showLabel && (
@@ -124,14 +126,32 @@ export default function CertificateStatus({
                     {t("certificateStatus")}:
                 </span>
             )}
+            {isPending ? (
+                <Button
+                    variant="ghost"
+                    className={`h-auto p-0 text-sm ${getStatusColor(cert.status)}`}
+                    onClick={handleRefresh}
+                    disabled={refreshing}
+                    title={t("restartCertificate", {
+                        defaultValue: "Restart Certificate"
+                    })}
+                >
+                    <span className="inline-flex items-center gap-1">
+                        {cert.status.charAt(0).toUpperCase() + cert.status.slice(1)}
+                        <RotateCw
+                            className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`}
+                        />
+                    </span>
+                </Button>
+            ) : (
                 <span className={`text-sm ${getStatusColor(cert.status)}`}>
-                <span className="inline-flex items-center">
+                    <span className="inline-flex items-center gap-1">
                         {cert.status.charAt(0).toUpperCase() + cert.status.slice(1)}
                         {shouldShowRefreshButton(cert.status, cert.updatedAt) && (
                             <Button
                                 size="icon"
                                 variant="ghost"
-                            className="ml-2 p-0 h-auto align-middle"
+                                className="p-0 w-3 h-auto align-middle"
                                 onClick={handleRefresh}
                                 disabled={refreshing}
                                 title={t("restartCertificate", {
@@ -139,12 +159,13 @@ export default function CertificateStatus({
                                 })}
                             >
                                 <RotateCw
-                                className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`}
+                                    className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`}
                                 />
                             </Button>
                         )}
                     </span>
                 </span>
+            )}
         </div>
     );
 }