Keep the Display panel shorter on a phone, and fold it away once a date is set

The date form made the Display panel 400 px tall at 360x640 (from 257) and 363 at 390x844 (from
220), and the Sun's system sat behind it: every orbit at 360x640, 81 per cent of their points at
390x844. A reader who set a date could not see what it did without closing the panel.

The window's description is one line, "AD 1 to AD 3000, where the planets' elements hold." (the
sentence on how far each moon's orbit strays is on each card and in the system note), and below
sm the field shrinks so Go stays on its line. Measured on :4301 with the panel open: 318 px at
360x640, Go at y 501 beside the field at 500; 318 px at 390x844, where 9 per cent of the orbits'
points are behind it and 37 of the 39 lines show.

At 360x640 the system is framed behind even the old 257 px sheet, so a date submitted with Go on
a narrow viewport now folds the sheet, as choosing a search result already does. Measured: after
Go at both sizes the panel is gone and the strip reads "Date 2020-12-21". Wide screens keep it
open.

Tests: the sheet folds after Go on a narrow viewport, and stays open on a wide one; jsdom has no
matchMedia, so the spec gives the dock one it can turn narrow. Guarded mutants: no fold fails the
first, a fold on every screen the second (and "jumps the clock to the date submitted", which then
cannot find Back to now).

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

src/app/features/hud/hud-dock.component.spec.ts

@@ -7,6 +7,13 @@ import { BookmarksStore } from '../../shared/state/bookmarks.store';
 import { TimeStore } from '../../shared/state/time.store';
 import { DEFAULT_HUD_DISPLAY, HudDisplay, HudDockComponent } from './hud-dock.component';
 
+// jsdom has no matchMedia, which the dock reads once, at import: this one answers from `viewport`.
+const viewport = vi.hoisted(() => {
+  const state = { wide: true };
+  window.matchMedia = (() => ({ get matches() { return state.wide; } })) as unknown as typeof window.matchMedia;
+  return state;
+});
+
 class EmptyDataLoaderService {
   loadStars() {
     return Promise.resolve({ stars: [], positions: new Float32Array(0) });
@@ -427,9 +434,6 @@ describe('HudDockComponent', () => {
       expect(field.min).toBe('0001-01-01T00:00');
       expect(field.max).toBe('3000-01-01T00:00');
       expect(host().querySelector(`#${field.getAttribute('aria-describedby')}`)?.textContent).toContain('AD 1 to AD 3000');
-      // Only the moons and the four dwarf planets from the SBDB are measured against Horizons; Pluto
-      // is on Standish's planet elements, and its card gives their span instead.
-      expect(host().querySelector(`#${field.getAttribute('aria-describedby')}`)?.textContent).toContain('Each moon’s card, and Ceres’s, Eris’s, Haumea’s and Makemake’s, says how far its orbit strays from 1950 to 2100');
     });
 
     it('jumps the clock to the date submitted, read as UTC', () => {
@@ -451,6 +455,25 @@ describe('HudDockComponent', () => {
       expect(host().querySelector<HTMLInputElement>('#clock-date')!.value).toBe(time.date().toISOString().slice(0, 16));
     });
 
+    it('folds the sheet away on a phone once a date is set, so the system it covered can be seen', () => {
+      viewport.wide = false;
+      try {
+        host().querySelector<HTMLInputElement>('#clock-date')!.value = '2020-12-21T18:00';
+        button('Go').click();
+        fixture.detectChanges();
+        expect(host().querySelector('#dock-panel-display')).toBeNull();
+      } finally {
+        viewport.wide = true;
+      }
+    });
+
+    it('keeps the panel open on a wide screen, where it covers little of the scene', () => {
+      host().querySelector<HTMLInputElement>('#clock-date')!.value = '2020-12-21T18:00';
+      button('Go').click();
+      fixture.detectChanges();
+      expect(host().querySelector('#dock-panel-display')).not.toBeNull();
+    });
+
     it('fills the date field again with the clock’s date when the panel is opened again', () => {
       time.setDate(new Date('2020-12-21T18:00Z'));
       fixture.componentInstance.toggleTab('display');

src/app/features/hud/hud-dock.component.ts

@@ -370,7 +370,7 @@ function isWideViewport(): boolean {
                   [max]="clockWindow.max"
                   [value]="dateField()"
                   aria-describedby="clock-date-window"
-                  class="hud-surface px-2.5 py-1 text-sm text-text tabular-nums caret-accent scheme-dark focus:border-accent focus:outline-none"
+                  class="hud-surface min-w-0 flex-1 px-2.5 py-1 text-sm text-text tabular-nums caret-accent scheme-dark focus:border-accent focus:outline-none sm:flex-none"
                 />
                 <button
                   type="submit"
@@ -378,8 +378,10 @@ function isWideViewport(): boolean {
                 >
                   Go
                 </button>
+                <!-- One line: on a phone the panel is a sheet over the system it sets the date of, and
+                     each card already says how far its own orbit strays. -->
                 <p id="clock-date-window" class="w-full text-[10px] text-muted">
-                  AD 1 to AD 3000, where the planets’ and Pluto’s elements hold. Each moon’s card, and Ceres’s, Eris’s, Haumea’s and Makemake’s, says how far its orbit strays from 1950 to 2100.
+                  AD 1 to AD 3000, where the planets’ elements hold.
                 </p>
               </form>
             </section>
@@ -549,6 +551,11 @@ export class HudDockComponent implements OnInit {
       // The field now says what the signal behind it does, so a later reset that fills it with
       // the present is a change the binding writes back, not one it drops as the same value.
       this.dateField.set(field.value);
+      // On a phone the sheet covers the system it has just set the date of: at 360 by 640 every
+      // orbit lies behind it. The thing to look at is now the scene, as after a search.
+      if (!isWideViewport()) {
+        this.activeTab.set(null);
+      }
     }
   }