From d8358048adafa95930c1be2db9b624627f51e332 Mon Sep 17 00:00:00 2001 From: Denis Groshev Date: Wed, 28 Oct 2026 16:07:48 +0100 Subject: [PATCH 1/3] fix(dock): show only icons on the narrow dock wings so labels stop covering the voice control At 900px and narrower the Location and Visual Presets wings shrink to --dock-side-compact (4.25rem), open or closed, but their text labels kept their full width. Between 721px and 900px, where the desktop dock is still shown, LOCATION and VISUAL PRESETS spilled over the idle voice control, and the LOCATION label took taps on the left half of the mic button. The label clip that existed was scoped to 620px, which the phone shell (720px) always covers, so it never applied to a visible dock. In that band the labels are now font-size 0 and lose their chevrons, so each wing shows only its icon. The label text is unchanged, so the toggles' "Expand/Collapse ..." aria-label and title, which panelChrome builds from it, keep the full name. The Cyber HUD layout sets a wider --dock-side-compact that fits its labels, so it keeps them. The unreachable 620px clip is removed. Found in GEV launch-readiness QA (HAL-728). --- docs/CURRENT-STATE.md | 14 +++++++++++ src/ui/styles/command-dock-trays.css | 35 ++++++++++++++++++++++------ 2 files changed, 42 insertions(+), 7 deletions(-) diff --git a/docs/CURRENT-STATE.md b/docs/CURRENT-STATE.md index 3e7f333a1..cfa9be32f 100644 --- a/docs/CURRENT-STATE.md +++ b/docs/CURRENT-STATE.md @@ -2665,6 +2665,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 (HAL-728). `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. The text node is unchanged, so +> `panelChrome.js` still builds the toggles' "Expand/Collapse …" `aria-label` +> and `title` from it; 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 diff --git a/src/ui/styles/command-dock-trays.css b/src/ui/styles/command-dock-trays.css index 547037de7..5575b588a 100644 --- a/src/ui/styles/command-dock-trays.css +++ b/src/ui/styles/command-dock-trays.css @@ -502,6 +502,34 @@ 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; + } + + :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) { @@ -510,13 +538,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); } From ce10a46b7f1780fcdeadfaf5f47396ce79065393 Mon Sep 17 00:00:00 2001 From: Denis Groshev Date: Wed, 28 Oct 2026 20:22:01 +0100 Subject: [PATCH 2/3] docs(changelog): add the dock icon-only wings entry --- changelog.d/1457-dock-icon-only-wings.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 changelog.d/1457-dock-icon-only-wings.md diff --git a/changelog.d/1457-dock-icon-only-wings.md b/changelog.d/1457-dock-icon-only-wings.md new file mode 100644 index 000000000..21825669b --- /dev/null +++ b/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 (ZloyS, #1457). From e9c6f2541f10ebc06ffbb9a9885bfc856224c835 Mon Sep 17 00:00:00 2001 From: Sameh Khamis Date: Mon, 2 Nov 2026 07:10:40 -0800 Subject: [PATCH 3/3] Drop the gap beside the icon-only dock wings, point the state doc at the Vue dock, and credit the author --- changelog.d/1457-dock-icon-only-wings.md | 2 +- docs/CURRENT-STATE.md | 8 ++++---- src/ui/styles/command-dock-trays.css | 2 ++ 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/changelog.d/1457-dock-icon-only-wings.md b/changelog.d/1457-dock-icon-only-wings.md index 21825669b..3d82cb934 100644 --- a/changelog.d/1457-dock-icon-only-wings.md +++ b/changelog.d/1457-dock-icon-only-wings.md @@ -2,4 +2,4 @@ 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 (ZloyS, #1457). + Cyber layout keeps its labels (Denis Groshev, @ZloyS, #1457). diff --git a/docs/CURRENT-STATE.md b/docs/CURRENT-STATE.md index a284cfbe5..c6accd22c 100644 --- a/docs/CURRENT-STATE.md +++ b/docs/CURRENT-STATE.md @@ -2801,11 +2801,11 @@ isCurrent })` gates BOTH halves of the map-stack switch, which is its only > 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 (HAL-728). `src/ui/styles/command-dock-trays.css` now sets the +> 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. The text node is unchanged, so -> `panelChrome.js` still builds the toggles' "Expand/Collapse …" `aria-label` -> and `title` from it; the browser tooltip is the only visible name on hover. +> 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 diff --git a/src/ui/styles/command-dock-trays.css b/src/ui/styles/command-dock-trays.css index 2f8585f4a..fb41acb8e 100644 --- a/src/ui/styles/command-dock-trays.css +++ b/src/ui/styles/command-dock-trays.css @@ -511,6 +511,8 @@ body:not(.ui-clean-view):not(.recording-mode):has( .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'])