fix(ui): сохранить целый CIDR в таблице маршрутов OSPF

tests/e2e/ospf-route-cidr.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/test"
+
+for (const width of [320, 390, 1280, 1440]) test("OSPF: CIDR целиком помещается в закреплённой ячейке " + width, async ({ page }) => {
+  await page.setViewportSize({ width, height: 1000 })
+  const destinations = ["198.18.190.2/32", "255.255.255.255/32"]
+  const host = { serverId: 1, serverName: "CHR", serverSite: "", serverCountry: "RU" }
+  let writes = 0
+  await page.route("**/health", r => r.fulfill({ json: { ok: true } }))
+  await page.route("**/api/**", r => {
+    const path = new URL(r.request().url()).pathname
+    if (r.request().method() !== "GET") writes++
+    return r.fulfill({ json: path === "/api/auth/config" ? { required: false } : path === "/api/servers" ? [{ id: 1, name: "CHR", host: "192.0.2.1", enabled: true, country: "RU", status: null }] : path === "/api/ospf/catalog" ? {
+      neighbors: [], interfaces: [], instances: [], bfdSessions: [], failures: [],
+      routes: destinations.map((destination, i) => ({ ...host, id: "route-" + i, destination, type: "Unknown", cost: null, nextHop: "198.18.91.2", via: "GRE-reserve", area: "" })),
+    } : {} })
+  })
+  await page.goto("/ospf?server=1&tab=routes")
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(2)
+  await page.evaluate(() => document.fonts.ready)
+  for (const destination of destinations) {
+    const text = page.getByText(destination, { exact: true })
+    await text.scrollIntoViewIfNeeded()
+    const bounds = await text.evaluate(element => {
+      const cell = element.closest("td")!, cellRect = cell.getBoundingClientRect(), style = getComputedStyle(cell)
+      const range = document.createRange(); range.selectNodeContents(element)
+      const rects = Array.from(range.getClientRects())
+      return { cell: { left: cellRect.left + parseFloat(style.paddingLeft), right: cellRect.right - parseFloat(style.paddingRight), top: cellRect.top, bottom: cellRect.bottom }, text: rects.map(r => ({ left: r.left, right: r.right, top: r.top, bottom: r.bottom })) }
+    })
+    // Splitting /32 into /3 + 2 makes the prefix visually ambiguous.
+    expect(bounds.text).toHaveLength(1)
+    for (const rect of bounds.text) {
+      expect(rect.left).toBeGreaterThanOrEqual(bounds.cell.left - 1)
+      expect(rect.right).toBeLessThanOrEqual(bounds.cell.right + 1)
+      expect(rect.top).toBeGreaterThanOrEqual(bounds.cell.top)
+      expect(rect.bottom).toBeLessThanOrEqual(bounds.cell.bottom)
+    }
+  }
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true)
+  await page.getByRole("button", { name: "Назначение", exact: true }).click()
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(2)
+  expect(writes).toBe(0)
+})