Fix sidebar scrollbar hit area (#2395)

This commit is contained in:
Neil 2026-05-19 21:08:15 -07:00 committed by GitHub
parent cbf2a52e5d
commit e4ecd80f5f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 5 additions and 18 deletions

View File

@ -46,9 +46,6 @@ 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)
@ -122,7 +119,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
<Button
variant={workspaceBoardOpen ? 'secondary' : 'ghost'}
size="icon-xs"
className={`${HEADER_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
className="text-muted-foreground"
aria-label="Workspace board"
aria-pressed={workspaceBoardOpen}
data-workspace-board-trigger=""
@ -145,7 +142,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
<Button
variant="ghost"
size="icon-xs"
className={`${HEADER_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
className="text-muted-foreground"
aria-label="View options"
data-workspace-board-preserve-open=""
>
@ -242,7 +239,6 @@ const SidebarHeader = React.memo(function SidebarHeader() {
<Button
variant="ghost"
size="icon-xs"
className={HEADER_ACTION_HIT_TARGET_CLASS}
onClick={() => {
if (!canCreateWorktree) {
return

View File

@ -15,9 +15,6 @@ 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'
export function shouldShowAgentsButton(
settings: Pick<GlobalSettings, 'experimentalActivity'> | null | undefined
@ -163,7 +160,6 @@ 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'
@ -236,7 +232,6 @@ 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'
@ -255,7 +250,6 @@ 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'
@ -278,7 +272,7 @@ const SidebarNav = React.memo(function SidebarNav() {
type="button"
onClick={() => openModal('worktree-palette')}
aria-label="Search worktrees and browser tabs"
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`}
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"
>
<Search className="size-4 shrink-0 text-sidebar-foreground/30" strokeWidth={1.75} />
<span className="flex-1">Search</span>

View File

@ -38,9 +38,6 @@ const GITHUB_ISSUES_URL = 'https://github.com/stablyai/orca/issues/'
const DISCORD_URL = 'https://discord.gg/fzjDKHxv8Q'
const X_URL = 'https://x.com/orca_build'
const DOCS_URL = 'https://www.onorca.dev/docs'
// Why: the sidebar resize handle intentionally keeps a wide right-edge hit
// target, but the bottom Settings action should remain clickable over it.
const SETTINGS_ACTION_HIT_TARGET_CLASS = 'relative z-20'
type SubmitIdentity = {
githubLogin: string | null
@ -374,7 +371,7 @@ const SidebarToolbar = React.memo(function SidebarToolbar() {
variant="ghost"
size="icon-xs"
onClick={openSettingsPage}
className={`${SETTINGS_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
className="text-muted-foreground"
>
<Settings className="size-3.5" />
</Button>

View File

@ -78,7 +78,7 @@ function Sidebar({
{/* Resize handle */}
<div
data-sidebar-resize-handle=""
className="absolute top-0 right-0 h-full w-5 cursor-col-resize transition-colors z-10 before:absolute before:inset-y-0 before:right-0 before:w-1 before:transition-colors hover:before:bg-ring/20 active:before:bg-ring/30"
className="absolute top-0 right-0 z-10 h-full w-px cursor-col-resize transition-colors hover:bg-ring/20 active:bg-ring/30"
onMouseDown={onResizeStart}
/>
</div>