fix(ui): ограничить редактор сценария без потери правил

components/data-grids/firewall-scenario-rules-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,
@@ -10,6 +10,7 @@ import {
 import { ActionBadge, ChainBadge } from "@/components/data-grids/firewall-rules-data-grid"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
+  DATA_GRID_CONTAINER_CLASS,
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
@@ -74,6 +75,7 @@ function FirewallScenarioRulesDataGrid({
       },
       {
         id: "chain",
+        size: 112,
         accessorKey: "chain",
         header: () => <span className="text-xs font-medium text-muted-foreground">Цепочка</span>,
         enableSorting: false,
@@ -86,6 +88,7 @@ function FirewallScenarioRulesDataGrid({
       },
       {
         id: "action",
+        size: 176,
         accessorKey: "action",
         header: () => <span className="text-xs font-medium text-muted-foreground">Действие</span>,
         enableSorting: false,
@@ -94,6 +97,7 @@ function FirewallScenarioRulesDataGrid({
       },
       {
         id: "src",
+        size: 176,
         accessorKey: "src",
         header: () => <span className="text-xs font-medium text-muted-foreground">Src</span>,
         enableSorting: false,
@@ -106,6 +110,7 @@ function FirewallScenarioRulesDataGrid({
       },
       {
         id: "dst",
+        size: 176,
         accessorKey: "dst",
         header: () => <span className="text-xs font-medium text-muted-foreground">Dst</span>,
         enableSorting: false,
@@ -118,6 +123,7 @@ function FirewallScenarioRulesDataGrid({
       },
       {
         id: "port",
+        size: 112,
         accessorKey: "port",
         header: () => <span className="text-xs font-medium text-muted-foreground">Порт</span>,
         enableSorting: false,
@@ -128,6 +134,7 @@ function FirewallScenarioRulesDataGrid({
       },
       {
         id: "iface",
+        size: 160,
         accessorKey: "iface",
         header: () => <span className="text-xs font-medium text-muted-foreground">Iface</span>,
         enableSorting: false,
@@ -138,6 +145,7 @@ function FirewallScenarioRulesDataGrid({
       },
       {
         id: "comment",
+        size: 192,
         accessorKey: "comment",
         header: () => <span className="text-xs font-medium text-muted-foreground">Комментарий</span>,
         enableSorting: false,
@@ -150,17 +158,18 @@ function FirewallScenarioRulesDataGrid({
       },
       {
         id: "actions",
+        size: 208,
         header: () => null,
         enableSorting: false,
         cell: ({ row }) => {
           const index = row.original._index - 1
           return (
-            <div className="flex items-center gap-0.5 justify-end opacity-0 group-hover/row:opacity-100 focus-within:opacity-100 transition-opacity">
+            <div className="flex items-center gap-1 justify-end">
               <button
                 type="button"
                 onClick={() => onToggleEnabled(row.original.id)}
-                title={row.original.enabled ? "Отключить" : "Включить"}
-                className="p-0.5 text-muted-foreground/40 hover:text-foreground transition-colors"
+                aria-label={`${row.original.enabled ? "Отключить" : "Включить"} правило ${index + 1}`}
+                className="size-11 shrink-0 inline-flex items-center justify-center rounded text-muted-foreground hover:text-foreground transition-colors"
               >
                 <PowerIcon className="size-3.5" />
               </button>
@@ -169,7 +178,7 @@ function FirewallScenarioRulesDataGrid({
                 onClick={() => onMoveUp(row.original.id)}
                 aria-label={`Поднять правило ${index + 1}`}
                 disabled={index === 0}
-                className="p-0.5 text-muted-foreground/40 hover:text-foreground disabled:opacity-20 transition-colors"
+                className="size-11 shrink-0 inline-flex items-center justify-center rounded text-muted-foreground hover:text-foreground disabled:opacity-40 transition-colors"
               >
                 ▲
               </button>
@@ -178,7 +187,7 @@ function FirewallScenarioRulesDataGrid({
                 onClick={() => onMoveDown(row.original.id)}
                 aria-label={`Опустить правило ${index + 1}`}
                 disabled={index === rules.length - 1}
-                className="p-0.5 text-muted-foreground/40 hover:text-foreground disabled:opacity-20 transition-colors"
+                className="size-11 shrink-0 inline-flex items-center justify-center rounded text-muted-foreground hover:text-foreground disabled:opacity-40 transition-colors"
               >
                 ▼
               </button>
@@ -186,7 +195,7 @@ function FirewallScenarioRulesDataGrid({
                 type="button"
                 onClick={() => onRemove(row.original.id)}
                 aria-label={`Удалить правило ${index + 1}`}
-                className="p-0.5 ml-0.5 text-muted-foreground/40 hover:text-red-500 transition-colors"
+                className="size-11 shrink-0 inline-flex items-center justify-center rounded text-muted-foreground hover:text-red-500 transition-colors"
               >
                 <Trash2Icon className="size-3.5" />
               </button>
@@ -201,21 +210,35 @@ function FirewallScenarioRulesDataGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["index", "chain"], end: [] } },
     manualSorting: true,
     data: indexedRules,
     columns,
     getRowId: (row) => row.id,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(rules.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [rules.length, pageIndex, pageSize, table])
+
   return (
     <DataGridShell
       table={table}
       recordCount={rules.length}
+      pagination={rules.length > 50 || pageSize !== 50}
+      tableLayout={{ dense: true, columnsPinnable: true }}
       tableClassNames={{
         bodyRow: cn("group/row text-xs", "hover:bg-muted/20 transition-colors"),
       }}
-    />
+    >
+      <DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
+        <DataGridScrollArea><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }