starred/orca
1
0
Fork 0
mirror of https://github.com/stablyai/orca.git synced 2026-09-30 00:03:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine tab scroll indicator appearance and sizing

Browse Source 
Reduce idle and expanded heights by 1px and 2px respectively, simplify color
expressions from color-mix to straightforward opacity utilities, and use
transparent background at rest for a more subtle, cohesive appearance.
This commit is contained in:
Jinjing
2026-09-04 09:48:04 -07:00
parent afc0c33ce3
commit 0f82e7b53c
2 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/tab-bar/TabStripScrollIndicator.test.tsx
+9 -9
View File
@@ -33,12 +33,12 @@ describe('TabStripScrollIndicator', () => {
expect(container.firstChild).toBeNull()
})
it('renders under the tabs with bottom-0 and idle 3px height', () => {
it('renders under the tabs with bottom-0 and idle 2px height', () => {
const { getByTestId } = render(<TabStripScrollIndicator metrics={OVERFLOW_METRICS} />)
const indicator = getByTestId('tab-strip-scroll-indicator')
expect(indicator).toBeTruthy()
expect(indicator.className).toContain('bottom-0')
expect(indicator.className).toContain('h-[3px]')
expect(indicator.className).toContain('h-[2px]')
expect(indicator.className).toContain('z-[12]')
expect(indicator.className).toContain('opacity-0')
expect(indicator.className).toContain('group-hover/tab-strip:opacity-100')
@@ -47,18 +47,18 @@ describe('TabStripScrollIndicator', () => {
expect(thumb).toBeTruthy()
})
it('expands to 5px and becomes opaque on pointer hover, restores on leave', () => {
it('expands to 3px and becomes opaque on pointer hover, restores on leave', () => {
const { getByTestId } = render(<TabStripScrollIndicator metrics={OVERFLOW_METRICS} />)
const indicator = getByTestId('tab-strip-scroll-indicator')
expect(indicator.className).toContain('h-[3px]')
expect(indicator.className).toContain('h-[2px]')
expect(indicator.className).toContain('opacity-0')
fireEvent.pointerEnter(indicator)
expect(indicator.className).toContain('h-[5px]')
expect(indicator.className).toContain('h-[3px]')
expect(indicator.className).toContain('opacity-100')
fireEvent.pointerLeave(indicator)
expect(indicator.className).toContain('h-[3px]')
expect(indicator.className).toContain('h-[2px]')
expect(indicator.className).toContain('opacity-0')
})
@@ -79,7 +79,7 @@ describe('TabStripScrollIndicator', () => {
fireEvent.pointerEnter(indicator)
expect(indicator.className).toContain('opacity-0')
expect(indicator.className).not.toContain('opacity-100')
expect(indicator.className).toContain('h-[3px]')
expect(indicator.className).toContain('h-[2px]')
})
it('does not forward wheel events when disabled', () => {
@@ -177,7 +177,7 @@ describe('TabStripScrollIndicator', () => {
// Start drag on thumb
fireEvent.pointerDown(thumb, { button: 0, clientX: 50 })
expect(indicator.className).toContain('h-[5px]')
expect(indicator.className).toContain('h-[3px]')
// Move pointer by 60px
fireEvent(window, new MouseEvent('pointermove', { clientX: 110 }))
@@ -185,7 +185,7 @@ describe('TabStripScrollIndicator', () => {
// Release drag
fireEvent(window, new MouseEvent('pointerup'))
expect(indicator.className).toContain('h-[3px]')
expect(indicator.className).toContain('h-[2px]')
})
it('cancels an active thumb drag when it becomes disabled', () => {
src/renderer/src/components/tab-bar/TabStripScrollIndicator.tsx
+4 -6
View File
@@ -198,9 +198,7 @@ export function TabStripScrollIndicator({
ref={trackRef}
data-testid="tab-strip-scroll-indicator"
className={`absolute inset-x-0 bottom-0 z-[12] select-none transition-[height,background-color,opacity] duration-150 ease-out ${
isExpanded
? 'h-[5px] bg-muted-foreground/15 cursor-pointer'
: 'h-[3px] bg-foreground/[0.04]'
isExpanded ? 'h-[3px] bg-muted-foreground/10 cursor-pointer' : 'h-[2px] bg-transparent'
} ${
disabled
? 'opacity-0 pointer-events-none'
@@ -219,10 +217,10 @@ export function TabStripScrollIndicator({
data-testid="tab-strip-scroll-thumb"
className={`absolute bottom-0 h-full rounded-full transition-colors duration-150 ease-out ${
isDragging
? 'bg-[color-mix(in_srgb,var(--foreground)_85%,transparent)] cursor-grabbing'
? 'bg-foreground/40 cursor-grabbing'
: isHovered
? 'bg-[color-mix(in_srgb,var(--foreground)_65%,transparent)] cursor-grab'
: 'bg-[color-mix(in_srgb,var(--foreground)_45%,transparent)] cursor-default'
? 'bg-muted-foreground/50 cursor-grab'
: 'bg-muted-foreground/25 cursor-default'
}`}
style={{
width: `${thumbLayout.widthPx}px`,