fix(ui): проверить доступность и адаптивность сертификатов

components/data-grids/certificates-data-grid.tsx

@@ -10,6 +10,7 @@ import {
 import type { Server } from "@/lib/data"
 import type { CertificateView } from "@/lib/certificate-view"
 import { CertDaysCell } from "@/components/data-grids/certificate-days-cell"
+import { Button } from "@/components/ui/button"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
@@ -40,27 +41,27 @@ const STATUS_CONFIG: Record<
 > = {
   unknown: {
     label: "Неизвестен",
-    icon: <CircleHelpIcon className="size-4 text-muted-foreground" />,
+    icon: <CircleHelpIcon aria-hidden="true" className="size-4 text-muted-foreground" />,
     badge: "bg-muted text-muted-foreground border-border",
     row: "",
   },
   valid: {
     label: "Действителен",
-    icon: <BadgeCheckIcon className="size-4 text-emerald-500" />,
-    badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+    icon: <BadgeCheckIcon aria-hidden="true" className="size-4 text-success" />,
+    badge: "bg-success/10 text-success border-success/20",
     row: "",
   },
   expired: {
     label: "Истёк",
-    icon: <ShieldOffIcon className="size-4 text-red-500" />,
-    badge: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
-    row: "bg-red-500/5",
+    icon: <ShieldOffIcon aria-hidden="true" className="size-4 text-destructive" />,
+    badge: "bg-destructive/10 text-destructive border-destructive/20",
+    row: "bg-destructive/5",
   },
   revoked: {
     label: "Отозван",
-    icon: <ShieldAlertIcon className="size-4 text-amber-500" />,
-    badge: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
-    row: "bg-amber-500/5",
+    icon: <ShieldAlertIcon aria-hidden="true" className="size-4 text-warning" />,
+    badge: "bg-warning/10 text-warning border-warning/20",
+    row: "bg-warning/5",
   },
 }
 
@@ -87,11 +88,13 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading, emptyTitle =
           const expanded = row.getIsExpanded()
           return (
             <div className="flex items-start gap-2 min-w-0">
+              <Button type="button" variant="ghost" size="icon" className="size-11 sm:size-8 shrink-0" aria-label={"Детали сертификата " + cert.name} aria-expanded={expanded} onClick={event => { event.stopPropagation(); row.toggleExpanded() }}>
               {expanded ? (
-                <ChevronDownIcon className="size-3.5 mt-0.5 shrink-0 text-muted-foreground" />
+                <ChevronDownIcon aria-hidden="true" className="size-3.5 mt-0.5 shrink-0 text-muted-foreground" />
               ) : (
-                <ChevronRightIcon className="size-3.5 mt-0.5 shrink-0 text-muted-foreground/40" />
+                <ChevronRightIcon aria-hidden="true" className="size-3.5 mt-0.5 shrink-0 text-muted-foreground/40" />
               )}
+              </Button>
               <div className="min-w-0">
                 <div className="flex items-center gap-2 min-w-0">
                   <span className="shrink-0">{cfg.icon}</span>