fix(ui): завершить адаптивность рекурсивных маршрутов

components/data-grids/recursive-routes-data-grid.tsx

@@ -95,7 +95,7 @@ function RouteGroupExpandedDetail({ group }: { group: RecursiveRouteGroup }) {
               <span className="text-[11px] font-mono">distance: {ep.distance}</span>
             </div>
             <p className="mt-1.5 font-mono text-sm break-all leading-tight">{ep.gateway}</p>
-            <div className="mt-1.5 text-[11px] text-muted-foreground flex items-center gap-3">
+            <div className="mt-1.5 text-[11px] text-muted-foreground flex flex-wrap items-center gap-3">
               <span>scope: {ep.scope ?? "—"}</span>
               <span>t.scope: {ep.targetScope ?? "—"}</span>
               <span>check: {ep.checkGateway || "—"}</span>
@@ -147,17 +147,17 @@ function RecursiveRoutesDataGrid({
           const g = row.original
           const isExpanded = expandedKey === g.key
           return (
-            <div className="flex items-start gap-2 min-w-0">
+            <button type="button" aria-label={`Раскрыть маршрут ${g.dstAddress} · ${g.routingTable}`} aria-expanded={isExpanded} onClick={event => { event.stopPropagation(); onExpandedChange?.(isExpanded ? null : g.key) }} className="flex items-start gap-2 min-w-0 text-left rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring">
               {isExpanded ? (
-                <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" />
               )}
               <div className="min-w-0">
                 <p className="font-medium truncate">{g.dstAddress}</p>
                 <p className="text-xs font-mono text-muted-foreground">{g.comment || "—"}</p>
               </div>
-            </div>
+            </button>
           )
         },
         meta: {
@@ -194,7 +194,7 @@ function RecursiveRoutesDataGrid({
                         ?
                       </span>
                     )}
-                    <span className="font-semibold text-sky-600 dark:text-sky-400 truncate min-w-0">
+                    <span className="font-semibold text-info truncate min-w-0">
                       {ep.gateway}
                     </span>
                   </div>
@@ -251,19 +251,16 @@ function RecursiveRoutesDataGrid({
               className="flex items-center gap-0.5 justify-end"
               onClick={(e) => e.stopPropagation()}
             >
-              <Button
-                size="sm"
+              <Button type="button" size="sm"
                 variant="ghost"
                 className="size-7 p-0 text-muted-foreground hover:text-foreground"
-                type="button"
                 aria-label={`Редактировать маршрут ${g.dstAddress} · ${g.routingTable}`}
                 disabled={mutationsDisabled}
                 onClick={() => onEdit(g)}
               >
-                <PencilIcon className="size-3.5" />
+                <PencilIcon aria-hidden="true" className="size-3.5" />
               </Button>
-              <Button
-                size="sm"
+              <Button type="button" size="sm"
                 variant="ghost"
                 className={cn(
                   "size-7 p-0 transition-colors",
@@ -271,7 +268,6 @@ function RecursiveRoutesDataGrid({
                     ? "text-destructive bg-destructive/10 hover:bg-destructive/20"
                     : "text-muted-foreground hover:text-destructive",
                 )}
-                type="button"
                 aria-label={`${confirmDel ? "Подтвердить удаление" : "Удалить маршрут"} ${g.dstAddress} · ${g.routingTable}`}
                 disabled={mutationsDisabled}
                 onClick={() => {
@@ -285,9 +281,9 @@ function RecursiveRoutesDataGrid({
                 onBlur={() => setConfirmDeleteKey(null)}
               >
                 {confirmDel ? (
-                  <AlertCircleIcon className="size-3.5" />
+                  <AlertCircleIcon aria-hidden="true" className="size-3.5" />
                 ) : (
-                  <TrashIcon className="size-3.5" />
+                  <TrashIcon aria-hidden="true" className="size-3.5" />
                 )}
               </Button>
             </div>
@@ -297,7 +293,7 @@ function RecursiveRoutesDataGrid({
         meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
       },
     ],
-    [confirmDeleteKey, expandedKey, onDelete, onEdit, mutationsDisabled],
+    [confirmDeleteKey, expandedKey, onDelete, onEdit, onExpandedChange, mutationsDisabled],
   )
 
   const table = useTable({
@@ -313,7 +309,7 @@ function RecursiveRoutesDataGrid({
   if (groups.length === 0) {
     return (
       <EmptyState
-        icon={<RouteIcon className="size-4" />}
+        icon={<RouteIcon aria-hidden="true" className="size-4" />}
         title={emptyTitle}
         className="border-0 py-10"
       />