Keep a giant's disc clear of its neighbours' names on a phone, not only on a desktop

d1aa22e framed a giant so its disc took half the view's tighter half-extent, inside the ring its
neighbours are named on at 0.74 of it. It measured that at 1600x1000 only. The names hang a fixed
distance in from the ring, 74-78 px, so on a 390x844 phone the 0.24 of the half-side between disc
and ring is 47 px and the names land on the disc: Betelgeuse was drawn 98 px wide with HD 39374's
name 70 px from its centre, Antares with HD 148199's at 68 px.

The framing now takes the canvas's shorter side and keeps the disc inside the ring less 90 px,
at most half the half-extent as before, at least a tenth. Measured in the running app at 390x844
on arrival: Betelgeuse, Antares and Rigel drawn 54 px wide, the nearest names at 70, 68 and 127
px. At 1600x1000 nothing changes: Betelgeuse 250 px, its nearest name at 296. The ring's fraction
moves to system-framing.ts, beside the rule that depends on it, and the scene reads it there.

The review's other half, that the Readout sheet covers 44 % of the disc once opened on a phone, is
not changed: the dock opens with no panel below 640 px and folds it on any tap on the scene, so
the star arrives with nothing over it.

Control: giving the names no reach fails "keeps a giant's disc clear of its neighbours' names on
a phone" alone. The scene's passing of the canvas size has no unit test (the test canvas has no
size); the app measurement above covers it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/app/features/galaxy-system/galaxy-system-scene.component.ts

@@ -44,6 +44,7 @@ import { galacticNormal, PolarGridPlane, TetherField } from './grid-plane';
 import { MilkyWayRenderer } from './milky-way-renderer';
 import {
   closestApproachAu,
+  NEIGHBOUR_RING_FRACTION,
   SUN_RADIUS_AU,
   systemFrameRadiusAu,
   systemFramingDistanceAu,
@@ -218,11 +219,6 @@ const ROUTE_RANGE_CEILING_PC = MAX_JUMP_RANGE_PC;
 
 /** How many neighbouring stars are named from inside a system. */
 const NEIGHBOUR_COUNT = 4;
-/**
- * How far out from the centre of the view a neighbour's name sits, as a fraction of the frame's
- * half-height. Clear of the scale rail at the top and the dock at the bottom.
- */
-const NEIGHBOUR_RING_NDC = 0.74;
 /**
  * How far in front of the camera a neighbour's name is planted, in AU. Any depth projects to
  * the same place on the ring, but not to the same stability: unprojecting at the middle of the
@@ -1523,7 +1519,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     const canvas = this.canvasRef().nativeElement;
     const placed = ringPlacement(
       angle,
-      NEIGHBOUR_RING_NDC,
+      NEIGHBOUR_RING_FRACTION,
       { width: canvas.clientWidth, height: canvas.clientHeight },
       this.reserved,
     );
@@ -2256,7 +2252,8 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     // Framed against the perspective camera whichever is active: the framing distance is what
     // the orthographic frustum is then sized from, so both projections show the same extent.
     const framingCamera = this.engine.getPerspectiveCamera();
-    const viewport = { fovDegrees: framingCamera.fov, aspect: framingCamera.aspect };
+    const canvas = this.canvasRef().nativeElement;
+    const viewport = { fovDegrees: framingCamera.fov, aspect: framingCamera.aspect, shorterSidePx: Math.min(canvas.clientWidth, canvas.clientHeight) };
     const framingDistance = systemFramingDistanceAu(
       this.systemRenderer.gridOuterRadiusAu,
       viewport,