Fix sidebar scrollbar hit area (#2395)
This commit is contained in:
parent
cbf2a52e5d
commit
e4ecd80f5f
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue