diff --git a/web/e2e/netgraph-3d.spec.ts b/web/e2e/netgraph-3d.spec.ts index e1c8805..fe94fb7 100644 --- a/web/e2e/netgraph-3d.spec.ts +++ b/web/e2e/netgraph-3d.spec.ts @@ -87,7 +87,8 @@ test('3D starts top-down, frames neighbours, inspects the drawn curve and preser await expect(stage).toHaveAttribute('data-history-routes', 'false'); await stage.click({ position: { x: midpoint[0]!, y: midpoint[1]! } }); await expect(stage).toHaveAttribute('data-selected-route-id', ''); - await expect(inspector).toBeHidden(); + // Nearby node markers remain inspectable when historical lines are hidden. + if (await inspector.isVisible()) await expect(inspector).toHaveAttribute('aria-label', 'Selected node details'); await page.locator('#graph-routes-button').click(); await page.locator('#display-button').click(); await page.getByRole('button', { name: 'Rotate topology right' }).click(); diff --git a/web/e2e/netgraph-regions.spec.ts b/web/e2e/netgraph-regions.spec.ts index 20d1349..be816ab 100644 --- a/web/e2e/netgraph-regions.spec.ts +++ b/web/e2e/netgraph-regions.spec.ts @@ -107,6 +107,7 @@ test('spacing and dragging survive refresh while live packets keep their routes await page.keyboard.press('Escape'); // The checkbox disclosure stays bounded and supports Back/Escape on touch screens. await page.locator('#region-filter > summary').click(); + await expect(page.locator('.region-options')).toBeVisible(); const box = (await page.locator('.region-options').boundingBox())!; expect(box.x).toBeGreaterThanOrEqual(0); expect(box.x + box.width).toBeLessThanOrEqual(page.viewportSize()!.width); expect(box.y + box.height).toBeLessThan((await page.locator('.controls').boundingBox())!.y); diff --git a/web/src/netgraph/styles.css b/web/src/netgraph/styles.css index 70e8ffb..bc6d5e1 100644 --- a/web/src/netgraph/styles.css +++ b/web/src/netgraph/styles.css @@ -281,7 +281,11 @@ button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible /* Region controls use the existing focus row and Display sheet. */ .graph-focus { flex-wrap:wrap; z-index:10; max-width:calc(100vw - 16px); gap:6px; padding-inline:6px; } .graph-focus > span { display:none; } -@media(min-width:600px) and (max-height:520px) and (orientation:landscape) { .graph-focus { top:12px; left:auto; right:8px; } } +@media(min-width:600px) and (max-height:520px) and (orientation:landscape) { + .graph-focus { top:12px; left:auto; right:8px; } + #region-filter .region-options { left:auto; right:0; } + #netgraph-app #node-inspector-sheet { max-height:calc(100dvh - var(--dock-height) - var(--dock-bottom) - var(--graph-controls-bottom,68px) - 24px); } +} .graph-focus select { max-width:112px; } .region-filter summary, #graph-routes-button { cursor:pointer; white-space:nowrap; padding:9px 6px; font:inherit; color:var(--ink-strong); } #graph-routes-button { border:1px solid var(--panel-border); border-radius:7px; background:var(--field-bg); }