diff --git a/src/app/features/hud/hud-dock.component.spec.ts b/src/app/features/hud/hud-dock.component.spec.ts
index 5ef5196..e8673b6 100644
--- a/src/app/features/hud/hud-dock.component.spec.ts
+++ b/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');
diff --git a/src/app/features/hud/hud-dock.component.ts b/src/app/features/hud/hud-dock.component.ts
index b282773..6fa208a 100644
--- a/src/app/features/hud/hud-dock.component.ts
+++ b/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);
+      }
     }
   }