diff --git a/web/e2e/netgraph-3d.spec.ts b/web/e2e/netgraph-3d.spec.ts index 6b5f8c7..40935f6 100644 --- a/web/e2e/netgraph-3d.spec.ts +++ b/web/e2e/netgraph-3d.spec.ts @@ -71,6 +71,10 @@ test('3D starts top-down, frames neighbours, inspects the drawn curve and preser await page.screenshot({ path: info.outputPath(`netgraph-3d-${scene}.png`) }); } const midpoint = (await stage.getAttribute('data-selected-route-screen'))!.split(',').map(Number); + if (info.project.name === 'mobile') { + expect((await page.locator('.controls').boundingBox())!.height).toBeLessThanOrEqual(100); + expect(midpoint[1]).toBeLessThan((await inspector.boundingBox())!.y - 8); + } await page.getByRole('button', { name: 'Close connection details' }).click(); await expect(inspector).toBeHidden(); await expect(stage).toHaveAttribute('data-render-state', 'idle'); await stage.click({ position: { x: midpoint[0]!, y: midpoint[1]! } }); diff --git a/web/src/netgraph/follow.ts b/web/src/netgraph/follow.ts index 322836a..3261170 100644 --- a/web/src/netgraph/follow.ts +++ b/web/src/netgraph/follow.ts @@ -4,7 +4,7 @@ import type { NetgraphRenderer } from './renderer'; /** Same live-only queue and ten-second dwell as Map. No animation is replayed. */ export function mountGraphFollow(graph: NetgraphRenderer, select: (id: string) => void) { - const button=document.createElement('button');button.type='button';button.className='control-button';button.textContent='◎ Follow';button.setAttribute('aria-pressed','false'); + const button=document.createElement('button');button.type='button';button.className='control-button';button.innerHTML='Follow';button.setAttribute('aria-label','Follow');button.setAttribute('aria-pressed','false'); document.querySelector('.controls')!.append(button); const card=document.createElement('section');card.id='follow-card';card.className='follow-card glass';card.hidden=true;card.setAttribute('aria-label','Live Follow activity'); card.innerHTML='
Live Follow
Waiting for activityNew live packets only
'; diff --git a/web/src/netgraph/styles.css b/web/src/netgraph/styles.css index d962b8b..81fc204 100644 --- a/web/src/netgraph/styles.css +++ b/web/src/netgraph/styles.css @@ -360,3 +360,11 @@ button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible .graph-summary { display: grid; grid-template-columns: repeat(2, max-content); gap: 3px 12px; } .graph-summary div + div { border: 0; padding-left: 0; } } + +@media(max-width:480px) { + html:root[data-cinematic] #netgraph-app .dock-views a { padding-inline:4px; } + html:root[data-cinematic] #netgraph-app .route-window select { width:56px; } +} +@media(max-width:480px) and (orientation:portrait) { + html:root[data-cinematic] #netgraph-app :is(.node-inspector-sheet,.node-inspector) { max-height:min(50dvh,calc(100dvh - var(--dock-height) - var(--dock-bottom) - 260px)); } +}