From eb96ef94de0f9cd9aa861372a9ffe3ae601334e2 Mon Sep 17 00:00:00 2001 From: Neil <4138956+nwparker@users.noreply.github.com> Date: Wed, 3 Jun 2026 17:13:26 -0700 Subject: [PATCH] fix: keep sidebar cards clear of gutter (#4602) --- src/renderer/src/assets/main.css | 5 +++-- .../sidebar/sidebar-resize-handle.test.ts | 16 ++++++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css index 664cc32606e..cdd6eb0f9e3 100644 --- a/src/renderer/src/assets/main.css +++ b/src/renderer/src/assets/main.css @@ -345,8 +345,9 @@ /* Keep the sidebar gutter reserved; only the thumb fades in on hover. */ .worktree-sidebar-scrollbar { - /* Why: the scrollbar itself owns the gutter; avoid adding a second visual gap beside cards. */ - padding-right: 0; + /* Why: the scrollbar gutter is paint-only in Chromium; this keeps card + surfaces clear of Orca's resize handle and right-edge sidebar chrome. */ + padding-right: 4px; scrollbar-gutter: stable; scrollbar-color: transparent transparent; } diff --git a/src/renderer/src/components/sidebar/sidebar-resize-handle.test.ts b/src/renderer/src/components/sidebar/sidebar-resize-handle.test.ts index 5679781802b..ef72cba89bd 100644 --- a/src/renderer/src/components/sidebar/sidebar-resize-handle.test.ts +++ b/src/renderer/src/components/sidebar/sidebar-resize-handle.test.ts @@ -1,10 +1,26 @@ +import { readFileSync } from 'node:fs' +import { dirname, resolve } from 'node:path' +import { fileURLToPath } from 'node:url' import { describe, expect, it } from 'vitest' import { WORKTREE_SIDEBAR_RESIZE_HANDLE_CLASS_NAME } from './index' +function getWorktreeSidebarScrollbarPaddingRight(): number { + const testDir = dirname(fileURLToPath(import.meta.url)) + const css = readFileSync(resolve(testDir, '../../assets/main.css'), 'utf8') + const block = css.match(/\.worktree-sidebar-scrollbar\s*\{(?[^}]*)\}/)?.groups?.body ?? '' + const value = block.match(/padding-right:\s*(?\d+)px/)?.groups?.px + + return value ? Number(value) : Number.NaN +} + describe('worktree sidebar resize handle', () => { it('keeps the hover target as wide as the right sidebar handle', () => { const classes = new Set(WORKTREE_SIDEBAR_RESIZE_HANDLE_CLASS_NAME.split(/\s+/)) expect(classes.has('w-1')).toBe(true) expect(classes.has('w-px')).toBe(false) }) + + it('keeps card content clear of the resize target', () => { + expect(getWorktreeSidebarScrollbarPaddingRight()).toBeGreaterThanOrEqual(4) + }) })