fix(ui): ограничить отображение каталога GRE-туннелей

components/data-grids/gre-tunnels-data-grid.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 
-import { useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import {
   type ColumnDef,
   useTable,
@@ -129,6 +129,7 @@ function GreTunnelsDataGrid({
     () => [
       {
         id: "name",
+        size: 160,
         accessorKey: "name",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Интерфейс / Сервер" className="ml-1" />
@@ -138,7 +139,7 @@ function GreTunnelsDataGrid({
           const srv = serverMap.get(t.serverId)
           return (
             <div className="min-w-0">
-              <p className="font-medium font-mono text-[13px]">{t.name}</p>
+              <p className="font-medium font-mono text-[13px] break-all">{t.name}</p>
               <p className="text-xs text-muted-foreground mt-0.5 flex items-center gap-1">
                 {srv && <Flag code={srv.country} />}
                 {srv?.name ?? t.serverId}
@@ -154,6 +155,7 @@ function GreTunnelsDataGrid({
       },
       {
         id: "endpoints",
+        size: 144,
         header: () => <span className="text-xs font-medium text-muted-foreground">Эндпоинты</span>,
         enableSorting: false,
         cell: ({ row }) => {
@@ -175,6 +177,7 @@ function GreTunnelsDataGrid({
       },
       {
         id: "innerIp",
+        size: 136,
         header: () => <span className="text-xs font-medium text-muted-foreground">Внутренний IP</span>,
         enableSorting: false,
         cell: ({ row }) => {
@@ -190,6 +193,7 @@ function GreTunnelsDataGrid({
       },
       {
         id: "pool",
+        size: 96,
         accessorKey: "poolId",
         header: ({ column }) => <DataGridSortHeader column={column} title="Пул" />,
         cell: ({ row }) => (
@@ -201,6 +205,7 @@ function GreTunnelsDataGrid({
       },
       {
         id: "ipsec",
+        size: 112,
         header: () => <span className="text-xs font-medium text-muted-foreground">IPsec</span>,
         enableSorting: false,
         cell: ({ row }) => <IpsecBadge secured={!!row.original.ipsec} />,
@@ -208,6 +213,7 @@ function GreTunnelsDataGrid({
       },
       {
         id: "encryption",
+        size: 160,
         header: () => <span className="text-xs font-medium text-muted-foreground">Шифрование</span>,
         enableSorting: false,
         cell: ({ row }) => {
@@ -236,6 +242,7 @@ function GreTunnelsDataGrid({
       },
       {
         id: "mtu",
+        size: 72,
         accessorKey: "mtu",
         header: ({ column }) => <DataGridSortHeader column={column} title="MTU" />,
         cell: ({ row }) => (
@@ -249,6 +256,7 @@ function GreTunnelsDataGrid({
       },
       {
         id: "keepalive",
+        size: 104,
         header: () => <span className="text-xs font-medium text-muted-foreground">Keepalive</span>,
         enableSorting: false,
         cell: ({ row }) => {
@@ -263,6 +271,7 @@ function GreTunnelsDataGrid({
       },
       {
         id: "status",
+        size: 112,
         accessorKey: "status",
         header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
         cell: ({ row }) => unknownServerIds?.has(row.original.serverId) ? <span className="text-sm text-muted-foreground">Неизвестно</span> : <TunnelStatus status={row.original.status} />,
@@ -281,9 +290,10 @@ function GreTunnelsDataGrid({
                 variant="ghost"
                 size="icon"
                 className={cn(
-                  "size-7 opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
+                  "size-11 shrink-0",
                 )}
                 title="Предпросмотр кода RouterOS"
+                aria-label={`Просмотр кода: ${t.name}`}
                 onClick={(e) => {
                   e.stopPropagation()
                   onCodePreview(t)
@@ -299,8 +309,8 @@ function GreTunnelsDataGrid({
                       variant="outline"
                       size="icon"
                       className={cn(
-                        "size-8 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
-                        "opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
+                        "size-11 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
+                        "opacity-100",
                         "data-popup-open:opacity-100",
                       )}
                       aria-label={`Действия: ${t.name}`}
@@ -338,7 +348,7 @@ function GreTunnelsDataGrid({
             </div>
           )
         },
-        size: 88,
+        size: 112,
         meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
       },
     ],
@@ -347,12 +357,20 @@ function GreTunnelsDataGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["name"], end: [] } },
     data: tunnels,
     columns,
     getRowId: row => JSON.stringify([row.serverId, row.id]),
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(tunnels.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [tunnels.length, pageIndex, pageSize, table])
+
   if (tunnels.length === 0) {
     return (
       <EmptyState
@@ -368,8 +386,14 @@ function GreTunnelsDataGrid({
     <DataGridShell
       table={table}
       recordCount={tunnels.length}
+      pagination={tunnels.length > 50 || pageSize !== 50}
+      tableLayout={{ dense: true, columnsPinnable: true }}
       tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row" }}
-    />
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }