xiaoxue_admin
/
orca
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix sidebar button hit targets near resize handle (#2224)

This commit is contained in:
Neil 2026-05-17 23:10:48 -07:00 committed by GitHub
parent 1deb769f37
commit 76f5d615e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/src/components/sidebar/SidebarHeader.tsx
View File

@ -51,6 +51,9 @@ const SORT_OPTIONS = [
const isMac = navigator.userAgent.includes('Mac')
const newWorktreeShortcutLabel = isMac ? '⌘N' : 'Ctrl+N'
// Why: the sidebar resize handle intentionally has a wide hit target at the
// right edge, but header actions overlapping it should remain clickable.
const HEADER_ACTION_HIT_TARGET_CLASS = 'relative z-20'
const SidebarHeader = React.memo(function SidebarHeader() {
const [workspaceBoardOpen, setWorkspaceBoardOpen] = useState(false)
@ -124,7 +127,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
<Button
variant={workspaceBoardOpen ? 'secondary' : 'ghost'}
size="icon-xs"
className="text-muted-foreground"
className={`${HEADER_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
aria-label="Workspace board"
aria-pressed={workspaceBoardOpen}
data-workspace-board-trigger=""
@ -147,7 +150,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
<Button
variant="ghost"
size="icon-xs"
className="text-muted-foreground"
className={`${HEADER_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
aria-label="View options"
data-workspace-board-preserve-open=""
>
@ -244,6 +247,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
<Button
variant="ghost"
size="icon-xs"
className={HEADER_ACTION_HIT_TARGET_CLASS}
onClick={() => {
if (!canCreateWorktree) {
return

8
src/renderer/src/components/sidebar/SidebarNav.tsx
View File

@ -14,6 +14,9 @@ import {
} from '../../../../shared/task-providers'
const isMac = typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac')
// Why: the sidebar resize handle keeps a wide edge target, but primary nav
// rows under that strip should remain clickable when their bounds overlap.
const SIDEBAR_NAV_HIT_TARGET_CLASS = 'relative z-20'
const SidebarNav = React.memo(function SidebarNav() {
const openTaskPage = useAppStore((s) => s.openTaskPage)
@ -152,6 +155,7 @@ const SidebarNav = React.memo(function SidebarNav() {
disabled={!canBrowseTasks}
aria-current={tasksActive ? 'page' : undefined}
className={cn(
SIDEBAR_NAV_HIT_TARGET_CLASS,
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight transition-colors',
tasksActive
? 'bg-sidebar-accent text-sidebar-accent-foreground'
@ -224,6 +228,7 @@ const SidebarNav = React.memo(function SidebarNav() {
onClick={openAutomationsPage}
aria-current={automationsActive ? 'page' : undefined}
className={cn(
SIDEBAR_NAV_HIT_TARGET_CLASS,
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight transition-colors',
automationsActive
? 'bg-sidebar-accent text-sidebar-accent-foreground'
@ -241,6 +246,7 @@ const SidebarNav = React.memo(function SidebarNav() {
onClick={openActivityPage}
aria-current={activityActive ? 'page' : undefined}
className={cn(
SIDEBAR_NAV_HIT_TARGET_CLASS,
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight transition-colors',
activityActive
? 'bg-sidebar-accent text-sidebar-accent-foreground'
@ -262,7 +268,7 @@ const SidebarNav = React.memo(function SidebarNav() {
type="button"
onClick={() => openModal('worktree-palette')}
aria-label="Search worktrees and browser tabs"
className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight text-sidebar-foreground/60 transition-colors hover:bg-sidebar-foreground/8"
className={`${SIDEBAR_NAV_HIT_TARGET_CLASS} group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight text-sidebar-foreground/60 transition-colors hover:bg-sidebar-foreground/8`}
>
<Search className="size-4 shrink-0 text-sidebar-foreground/30" strokeWidth={1.75} />
<span className="flex-1">Search</span>