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

components/data-grids/ospf-bfd-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,
@@ -76,6 +76,7 @@ function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) {
     () => [
       {
         id: "serverLabel",
+        size: 128,
         accessorKey: "serverLabel",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Роутер" className="ml-1" />
@@ -84,7 +85,7 @@ function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) {
           const b = row.original
           return (
             <div className="flex flex-col gap-0.5">
-              <span className="font-mono whitespace-nowrap">{b.serverLabel}</span>
+              <span className="font-mono whitespace-normal break-all">{b.serverLabel}</span>
               {b.multihop === null && <Chip>Режим неизвестен</Chip>}
               {b.multihop === true && (
                 <Chip color="bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20">
@@ -254,6 +255,7 @@ function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) {
       },
       {
         id: "stateChanges",
+        size: 112,
         accessorKey: "stateChanges",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Переходы" className="ml-auto" />
@@ -273,12 +275,20 @@ function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) {
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["serverLabel"], end: [] } },
     data: sessions,
     columns,
     getRowId: (row) => row.id,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(sessions.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [sessions.length, pageIndex, pageSize, table])
+
   if (sessions.length === 0) {
     return (
       <EmptyState
@@ -293,9 +303,14 @@ function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) {
     <DataGridShell
       table={table}
       recordCount={sessions.length}
+      pagination={sessions.length > 50 || pageSize !== 50}
       tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row hover:bg-muted/30" }}
-      tableLayout={{ dense: true }}
-    />
+      tableLayout={{ dense: true, columnsPinnable: true }}
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }