fix: keep connections visible above narrow-screen inspection

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]! } });

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='<span aria-hidden="true">◎</span><span>Follow</span>';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='<header><strong>Live Follow</strong><button type="button" data-hold>Hold</button><button type="button" id="follow-close" data-close aria-label="Close Live Follow">×</button></header><label class="follow-scope">Follow area<select aria-label="Follow scope"><option value="all">Everywhere</option><option value="area">This area</option><option value="node">Selected node</option></select></label><div class="follow-copy"><strong data-title>Waiting for activity</strong><span data-detail>New live packets only</span></div><footer><span data-state>Waiting for activity</span><output aria-label="Seconds until next activity"></output></footer><progress max="10" value="0" aria-label="Time remaining on this activity"></progress><div class="follow-actions"><button type="button" data-next>Next</button><button type="button" data-inspect disabled>Inspect</button></div>';

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)); }
+}