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>
2026-09-30 15:44:02 +02:00
parent 74535accc5
commit 09eaf9532f
2 changed files with 35 additions and 5 deletions
@@ -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);
+      }
    }
  }