diff --git a/src/app/features/hud/hud-dock.component.spec.ts b/src/app/features/hud/hud-dock.component.spec.ts
index 4598890..a0ce7ee 100644
--- a/src/app/features/hud/hud-dock.component.spec.ts
+++ b/src/app/features/hud/hud-dock.component.spec.ts
@@ -485,10 +485,51 @@ describe('HudDockComponent', () => {
       // At 360 px the system view's five tabs take 397 px, and pushed the strip past the right
       // edge, where nothing scrolls: after Go on a phone the date was nowhere on screen.
       fixture.componentRef.setInput('date', '2020-12-21');
+      fixture.componentRef.setInput('range', '417 AU');
       fixture.detectChanges();
       const tabs = host().querySelector('[role="tablist"]')!.classList;
       expect(tabs.contains('min-w-0') && tabs.contains('overflow-x-auto')).toBe(true);
+      // Its own scrollbar, where the browser draws one, thin and dark: a desktop's default was a
+      // light bar 15 px tall across the dock.
+      expect(tabs.contains('scheme-dark') && tabs.contains('[scrollbar-width:thin]')).toBe(true);
       expect(host().querySelector('[data-testid="hud-date"]')!.classList.contains('shrink-0')).toBe(true);
+      // The range keeps its width where it is shown, or '417 AU' wraps and the row grows 20 px; on a
+      // phone it is not shown, where at the present it took the Display tab out of sight.
+      const range = [...host().querySelectorAll('p')].find((p) => p.textContent?.includes('Range'))!.classList;
+      expect(range.contains('shrink-0') && range.contains('max-sm:hidden')).toBe(true);
+    });
+
+    it('brings the tab that matters back into view once the date strip has narrowed the tabs', () => {
+      // jsdom lays nothing out; what is checked is which tab is asked to be in view, and when.
+      const scrolled: string[] = [];
+      HTMLElement.prototype.scrollIntoView = function (this: HTMLElement) {
+        scrolled.push(this.id);
+      };
+      try {
+        // On a phone: the tab focus went back to, which after Go sat wholly out of sight.
+        viewport.wide = false;
+        host().querySelector<HTMLInputElement>('#clock-date')!.value = '2020-12-21T18:00';
+        button('Go').click();
+        fixture.detectChanges();
+        scrolled.length = 0;
+        fixture.componentRef.setInput('date', '2020-12-21');
+        fixture.detectChanges();
+        expect(scrolled).toEqual(['dock-tab-display']);
+        // On a wider window, where the panel stays open: its tab, focus being in the panel.
+        viewport.wide = true;
+        fixture.componentRef.setInput('date', '');
+        fixture.detectChanges();
+        tab('Display').click();
+        fixture.detectChanges();
+        host().querySelector<HTMLInputElement>('#clock-date')!.focus();
+        scrolled.length = 0;
+        fixture.componentRef.setInput('date', '2020-12-21');
+        fixture.detectChanges();
+        expect(scrolled).toEqual(['dock-tab-display']);
+      } finally {
+        viewport.wide = true;
+        delete (HTMLElement.prototype as Partial<HTMLElement>).scrollIntoView;
+      }
     });
 
     it('keeps the panel open on a wide screen, where it covers little of the scene', () => {
diff --git a/src/app/features/hud/hud-dock.component.ts b/src/app/features/hud/hud-dock.component.ts
index c9b6759..a7ce49c 100644
--- a/src/app/features/hud/hud-dock.component.ts
+++ b/src/app/features/hud/hud-dock.component.ts
@@ -1,4 +1,5 @@
 import {
+  afterRenderEffect,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -416,8 +417,14 @@ function isWideViewport(): boolean {
 
       <div class="hud-brackets hud-surface pointer-events-auto flex w-full items-stretch">
         <!-- The tabs give way to the date and the range, and scroll: the five of the system view
-             take 397 px, and on a portrait phone they pushed the date off the right edge. -->
-        <div role="tablist" aria-label="Dock" class="flex min-w-0 items-stretch divide-x divide-border/40 overflow-x-auto">
+             take 397 px, and on a portrait phone they pushed the date off the right edge. Where
+             the browser draws a scrollbar of its own, it is a thin dark one: on a desktop window
+             under 770 px wide its default was a light bar 15 px tall across the dark dock. -->
+        <div
+          role="tablist"
+          aria-label="Dock"
+          class="flex min-w-0 scheme-dark items-stretch divide-x divide-border/40 overflow-x-auto [scrollbar-width:thin]"
+        >
           @for (tab of tabs(); track tab) {
             <button
               type="button"
@@ -448,9 +455,11 @@ function isWideViewport(): boolean {
             <span class="text-sm text-accent tabular-nums">{{ date() }}</span>
           </p>
         }
+        <!-- Not on a phone, where it never showed before the tabs gave way to it: kept, its 121 px
+             took the Display tab out of sight at the present, the state the map opens in. -->
         @if (range()) {
           <p
-            class="flex shrink-0 items-baseline gap-2 border-l border-border/40 px-3 py-2 sm:px-4"
+            class="flex shrink-0 items-baseline gap-2 border-l border-border/40 px-3 py-2 max-sm:hidden sm:px-4"
             [class.ml-auto]="!date()"
           >
             <span class="type-label text-muted">Range</span>
@@ -527,6 +536,23 @@ export class HudDockComponent implements OnInit {
   private readonly search = viewChild(SearchComponent);
   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
 
+  private readonly dateShown = computed(() => this.date() !== '');
+  /**
+   * The tab list gives way to the date strip but keeps its scroll, so once the strip is drawn the
+   * tab that matters can be wholly out of sight: after Go on a phone, the tab focus went back to
+   * (0 of its 79 px at 360, 390 and 412 wide), and on a desktop window 640 to 770 px wide, the tab
+   * of the panel left open. Brought back into view whenever the strip comes or goes: the focused
+   * tab, else the selected one.
+   */
+  private readonly keepTabInView = afterRenderEffect(() => {
+    this.dateShown();
+    const list = this.host.nativeElement.querySelector('[role="tablist"]');
+    const focused = document.activeElement;
+    const tab = focused && list?.contains(focused) ? focused : list?.querySelector('[aria-selected="true"]');
+    // Optional: jsdom, which the unit tests run in, lays nothing out and has no scrollIntoView.
+    tab?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+  });
+
   ngOnInit(): void {
     this.activeTab.set(isWideViewport() ? this.defaultTab() : null);
     this.fillDateField();