Merge pull request #1457 from ZloyS/denis/hal-728-dock-icon-only-wings

fix(dock): show only icons on the narrow dock wings so labels stop covering the voice control

changelog.d/1457-dock-icon-only-wings.md

@@ -0,0 +1,5 @@
+- Between 721px and 900px wide (tablet portrait, phone landscape), the
+  Location and Visual Presets dock wings show only their icons, so their
+  labels no longer spill over the voice control or take taps meant for the
+  mic button. The full name stays in the tooltip and accessible name, and the
+  Cyber layout keeps its labels (Denis Groshev, @ZloyS, #1457).

docs/CURRENT-STATE.md

@@ -2796,6 +2796,20 @@ isCurrent })` gates BOTH halves of the map-stack switch, which is its only
 >   name the panel (`#location-bar` / `#control-panel`) to reach (2,5,0). Adding
 >   a new tray rule means checking it against the pinned variants, not just
 >   against the base rule.
+> - **Dock wings are icon-only from 900px down to 721px (2026-10-28):** at
+>   ≤900px `--dock-side-compact` shrinks the Location and Visual Presets wings
+>   to 4.25rem, open or closed (an open tray pops out above the dock), which is
+>   too narrow for their text labels. The labels used to spill over the voice
+>   control, and the LOCATION label captured taps on the left half of the mic
+>   button. `src/ui/styles/command-dock-trays.css` now sets the
+>   labels to `font-size: 0` and drops their `›`/`‹` chevrons in that band, so
+>   each wing shows only its icon. `CommandDockView.vue` still gives the toggles
+>   their "Expand/Collapse …" `aria-label` and `title` (`trayWords`), so the
+>   browser tooltip is the only visible name on hover.
+>   The Cyber HUD layout is excluded: it sets `--dock-side-compact` to
+>   9–9.75rem, which fits its labels. The former ≤620px ellipsis clip is gone:
+>   the phone shell takes over at 720px, so it never applied to a visible
+>   dock.
 > - **LOCATION mini-status is data-only today (2026-08-20):** the collapsed
 >   readout now follows a free-text geocode search as well as preset pills
 >   (`src/locationStatus.js` owns the copy for both), and every other camera

src/ui/styles/command-dock-trays.css

@@ -495,6 +495,36 @@ body:not(.ui-clean-view):not(.recording-mode):has(
   #command-dock .gev-voice-error-tray {
     width: min(24rem, calc(100vw - 1.5rem));
   }
+
+  /* The wings shrink to --dock-side-compact at this width, open or closed (an
+     open tray pops out above the dock), which is too narrow for the text
+     labels; they would spill over the voice control and take its taps. The
+     wings show only their icon; the toggles keep their aria-label. Cyber sets
+     a wider --dock-side-compact that fits its labels, so it keeps them. */
+  :root:not([data-ui-theme='cyber'])
+    #command-dock
+    :is(#location-bar, #control-panel)
+    .panel-title,
+  :root:not([data-ui-theme='cyber'])
+    #command-dock
+    :is(#location-bar, #control-panel)
+    .location-toolbar-label {
+    font-size: 0;
+    letter-spacing: 0;
+    /* The empty text is still a flex item; drop the gap it would claim. */
+    gap: 0;
+  }
+
+  :root:not([data-ui-theme='cyber'])
+    #command-dock
+    :is(#location-bar, #control-panel)
+    .panel-title::after,
+  :root:not([data-ui-theme='cyber'])
+    #command-dock
+    :is(#location-bar, #control-panel)
+    .location-toolbar-label::after {
+    content: none;
+  }
 }
 
 @media (max-width: 620px) {
@@ -503,13 +533,6 @@ body:not(.ui-clean-view):not(.recording-mode):has(
     --dock-voice-width: 8.75rem;
   }
 
-  #command-dock .panel-title,
-  #command-dock .location-toolbar-label {
-    max-width: 2.3rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   #left-panel-stack {
     bottom: calc(50vh + 8px);
   }