fix: keep sidebar cards clear of gutter (#4602)

This commit is contained in:
Neil
2026-06-03 17:13:26 -07:00
committed by GitHub
parent 065c620c10
commit eb96ef94de
2 changed files with 19 additions and 2 deletions
+3 -2
View File
@@ -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;
}
@@ -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*\{(?<body>[^}]*)\}/)?.groups?.body ?? ''
const value = block.match(/padding-right:\s*(?<px>\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)
})
})