feat(sidebar): reveal project-row action icons on hover/focus#2806
feat(sidebar): reveal project-row action icons on hover/focus#2806AgentWrapper wants to merge 3 commits into
Conversation
Reduce sidebar clutter by hiding the dashboard, orchestrator, and kebab icons on project rows until the row is hovered or keyboard focus moves into it. Icons stay visible on touch devices (hover:none) and while a dropdown inside the cluster is open. The existing project-row padding continues to reserve space so names never overlap the hidden hit area. Closes #2805
Vaibhaav-Tiwari
left a comment
Vaibhaav-Tiwari
left a comment
There was a problem hiding this comment.
The new CSS is supposed to hide sidebar project action icons until hover/focus, but another existing CSS rule overrides it and keeps the icons visible all the time.
So the PR’s main feature does not actually work.
The action cluster also carries .sidebar-expanded-chrome, whose visible- state rule has higher specificity than a plain class and was keeping the icons opaque. Scope the hover/focus reveal opacity rules under [data-expanded-chrome="visible"] so they win and the icons actually hide on pointer-hover devices. Addresses review feedback on PR #2806.
AgentWrapper
left a comment
AgentWrapper
left a comment
There was a problem hiding this comment.
Fixed: the action cluster also carries .sidebar-expanded-chrome, whose visible-state rule ([data-slot="sidebar-container"][data-expanded-chrome="visible"] .sidebar-expanded-chrome) has higher specificity than a plain class and was forcing opacity: 1.
I scoped the hover/focus reveal rules under [data-expanded-chrome="visible"] with matching specificity so the icons now actually hide on pointer-hover devices. The collapse/expand fade behavior is preserved because the cluster still keeps .sidebar-expanded-chrome.
3 participants
Closes #2805
Replaces the permanently-visible dashboard / orchestrator / ⋮ menu icon cluster on each project row with a hover/focus-revealed cluster:
@media (hover: hover)).hover: none) so the actions remain discoverable and tappable.pr-sidebar-project-actionsreserved padding so project names never overlap the hidden hit targets.prefers-reduced-motionby disabling the fade transition.Files changed
frontend/src/renderer/components/Sidebar.tsx– applies thesidebar-project-actionsclass and updates the explanatory comment.frontend/src/renderer/styles.css– adds the hover/focus/touch CSS rules.frontend/src/renderer/components/Sidebar.test.tsx– renames the existing padding test and adds a keyboard-focusability test.Verification
cd frontend && npm run test -- src/renderer/components/Sidebar.test.tsx(36 tests passed)cd frontend && npm run typecheck