Skip to content

fix(workspace-dropdown): move row paths from a second line to hover - #1185

Merged
sudomaggie merged 1 commit into
developfrom
fix/workspace-dropdown-hover-path
Sep 1, 2026
Merged

fix(workspace-dropdown): move row paths from a second line to hover#1185
sudomaggie merged 1 commit into
developfrom
fix/workspace-dropdown-hover-path

Conversation

@Harry19081

Copy link
Copy Markdown
Member

Problem

Rows in the anchored workspace dropdown (the repo/workspace switcher on the
composer's SessionInfoLine) rendered their filesystem path on a second line.
useExternalRecentPaths sets description to the raw path, so every
"Used elsewhere" row printed one, and buildOpenPathItem did the same for the
open-path row.

DROPDOWN_CLASSES.item fixes the row at 32px (h-8 min-h-8), so a second line
overflowed the row and pushed the list past its LIST_MAX_HEIGHT. The row also
had no way to show a long path in full — the panel is 320px wide.

Solution

The path moves out of the row and into a framed side tooltip on hover. A new
RowDetailTooltip wraps any row that has secondary text; rows without it render
bare. RepoRow and OpenPathRow collapse to a single truncating label, matching
WorkspaceRow, which puts all three row types back inside the token-fixed 32px
height.

Placement is the load-bearing detail. Tooltip measures side placements from
the enclosing [role="menu"] panel and offsets by DROPDOWN_PANEL.submenuGap,
so the popup clears the panel border the same distance a submenu would. Without
that anchor the tooltip would be positioned against the row's inset rect and land
~2px inside the panel — and since .native-tooltip is z-1060 against the
panel's z-10000, that overlap would be occluded. The panel therefore gains
role="menu" and the rows role="menuitem", matching PortsStatusMenu
(the same search-panel shape) and AddActionsDropdown.

Two related token adoptions in the same file: the local VIEWPORT_MARGIN = 12
is replaced by DROPDOWN_PANEL.viewportPadding, and the removed second line
takes the arbitrary text-[11px] with it.

The tooltip carries the same content under the same condition as the old second
line — this relocates the information, it does not add or remove any.

Potential risks

  • Discoverability. A path that was always visible is now behind a 200ms
    hover. That is the intended trade (it was overflowing its row), but a
    pointer-only affordance is worse for keyboard navigation: arrowing onto a row
    does not open the tooltip. Keyboard users can still tell rows apart by name,
    and the spotlight variant keeps its explicit "Show path" footer toggle.
  • Positioning. If neither side fits the viewport, Tooltip clamps rather
    than flips and the popup can land over the panel, where the z-index gap hides
    it. smartPlacement is on, so this needs a viewport narrower than
    panel + tooltip on both sides.
  • ARIA. role="menu" + role="menuitem" is a net improvement over buttons
    in a bare div, but getItemProps still sets aria-selected, which
    menuitem does not support. That attribute was already there (equally
    unsupported on a bare button), so this is pre-existing, not a regression;
    fixing it means touching the shared useDropdownListNavigation used by ten
    components.
  • Not changed: LIST_MAX_HEIGHT (360) and MIN_DROPDOWN_WIDTH (320) keep
    their local constants. The nearest tokens are 200 and 280, so adopting them
    would resize the panel.

Verification

Run against this branch in an isolated worktree checked out at its own commit
(not the shared dirty checkout), with node_modules symlinked:

  • npx tsc --noEmit --pretty false -p tsconfig.json — exit 0.
  • npx vitest run --config config/vitest.config.ts src/scaffold/GlobalSpotlight
    — 28 files, 133 tests, all passing.
  • npx eslint src/scaffold/GlobalSpotlight/palettes/WorkspacePalette/ — clean.
  • npx prettier --check on the changed file — clean.
  • npm run check:test-placement — clean (the directory colocates tests, and the
    new file is colocated).

New WorkspaceDropdown.test.ts covers the three behaviours: the row renders its
name only and not the path, hovering reveals the path in a tooltip and leaving
dismisses it, and the row resolves to a [role="menu"] ancestor so the tooltip
can clear the panel edge. Mutation-checked — restoring the second line, dropping
the tooltip, or removing role="menu" fails all three.

Not run / not applicable:

  • No screenshots. ORG2 is a Tauri app with no browser-renderable entry
    point, so the dropdown cannot be captured without a full app launch. The
    hover behaviour is verified through jsdom rendering instead.
  • E2E was not run; there is no rendered spec covering this dropdown.
  • No "Pre-commit hook ran." trailer. The commit was built with plumbing
    (temp index + commit-tree) so the unrelated uncommitted work in the shared
    checkout could not enter it. Hooks were skipped, so typecheck, lint and tests
    were run by hand as listed above. Note the hook's TypeScript gate cannot fail
    a commit anyway (TSC_OUTPUT=$(...) || true then $? is always 0), so a green
    hook would not have been evidence.
  • Base. Built on origin/develop (aa17dccd7). That commit's unused-export
    sweep (export interface WorkspaceDropdownProps to interface ...) is
    preserved rather than reverted — the local checkout predates it.

Externally-used and open-path rows rendered their filesystem path as a
second line inside a row whose height is fixed at 32px by DROPDOWN_ITEM,
so the text overflowed the row and pushed the list past its max height.

The path now surfaces in a framed side tooltip on hover. Tooltip measures
side placements from the enclosing role="menu" panel and offsets by
DROPDOWN_PANEL.submenuGap, so the popup clears the panel border the way a
submenu does instead of landing underneath it at a lower z-index. Rows
carry role="menuitem" to keep the menu's children valid, and the local
VIEWPORT_MARGIN constant is replaced by DROPDOWN_PANEL.viewportPadding.
@Harry19081 Harry19081 added UX Improvements to user experience, workflow smoothness frontend-ui Frontend UI, design system, accessibility, layout, or theming labels Sep 1, 2026
@sudomaggie
sudomaggie merged commit 76e0ce5 into develop Sep 1, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend-ui Frontend UI, design system, accessibility, layout, or theming UX Improvements to user experience, workflow smoothness

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants