diff --git a/src/renderer/src/components/right-sidebar/right-sidebar-primary-action-layout.test.ts b/src/renderer/src/components/right-sidebar/right-sidebar-primary-action-layout.test.ts index 0e9921b3dc8..8cf54832c58 100644 --- a/src/renderer/src/components/right-sidebar/right-sidebar-primary-action-layout.test.ts +++ b/src/renderer/src/components/right-sidebar/right-sidebar-primary-action-layout.test.ts @@ -7,6 +7,14 @@ import { } from './right-sidebar-primary-action-layout' describe('right sidebar primary action layout classes', () => { + it('fills the sidebar row while stretching wrapped and direct primary buttons', () => { + expect(RIGHT_SIDEBAR_SPLIT_ACTION_ROW_CLASS).toContain('flex') + expect(RIGHT_SIDEBAR_SPLIT_ACTION_ROW_CLASS).toContain('w-full') + expect(RIGHT_SIDEBAR_SPLIT_ACTION_ROW_CLASS).toContain('[&>*:first-child]:flex-1') + expect(RIGHT_SIDEBAR_SPLIT_ACTION_ROW_CLASS).toContain('[&>*:first-child>button]:w-full') + expect(RIGHT_SIDEBAR_SPLIT_ACTION_ROW_CLASS).toContain('[&>button:first-child]:w-full') + }) + it('lets split-button primaries shrink inside the minimum-width sidebar', () => { expect(RIGHT_SIDEBAR_SPLIT_ACTION_ROW_CLASS).toContain('min-w-0') expect(RIGHT_SIDEBAR_MORPHING_PRIMARY_BUTTON_CLASS).toContain('shrink') diff --git a/src/renderer/src/components/right-sidebar/right-sidebar-primary-action-layout.ts b/src/renderer/src/components/right-sidebar/right-sidebar-primary-action-layout.ts index 4ea850c8ac3..514aa28f702 100644 --- a/src/renderer/src/components/right-sidebar/right-sidebar-primary-action-layout.ts +++ b/src/renderer/src/components/right-sidebar/right-sidebar-primary-action-layout.ts @@ -1,7 +1,8 @@ -// Why: sidebar primaries rotate labels as git/review state changes. Content-width -// reads better than full-bleed; preferred width reduces jump between states; the +// Why: sidebar primaries rotate labels as git/review state changes. Filling the +// pane keeps their right edge aligned with the surrounding editor chrome; the // primary half must shrink first so split-button chevrons never overflow. -export const RIGHT_SIDEBAR_SPLIT_ACTION_ROW_CLASS = 'inline-flex min-w-0 max-w-full items-stretch' +export const RIGHT_SIDEBAR_SPLIT_ACTION_ROW_CLASS = + 'flex w-full min-w-0 items-stretch [&>*:first-child]:flex-1 [&>*:first-child>button]:w-full [&>button:first-child]:w-full' export const RIGHT_SIDEBAR_MORPHING_PRIMARY_BUTTON_CLASS = 'w-[10.5rem] min-w-0 max-w-full shrink'