diff --git a/desktop/src/components/controls/PermissionModeSelector.test.tsx b/desktop/src/components/controls/PermissionModeSelector.test.tsx index 67659eef..ed241388 100644 --- a/desktop/src/components/controls/PermissionModeSelector.test.tsx +++ b/desktop/src/components/controls/PermissionModeSelector.test.tsx @@ -479,6 +479,26 @@ describe('PermissionModeSelector', () => { expect(onChange).toHaveBeenCalledWith('acceptEdits') }) + it('opens the desktop menu from the trigger start edge by default', () => { + render() + + fireEvent.click(screen.getByRole('button', { name: 'Ask permissions' })) + + const menu = screen.getByRole('menu') + expect(menu).toHaveClass('left-0') + expect(menu).not.toHaveClass('right-0') + }) + + it('anchors the desktop menu to the trigger end edge when asked to align right', () => { + render() + + fireEvent.click(screen.getByRole('button', { name: 'Ask permissions' })) + + const menu = screen.getByRole('menu') + expect(menu).toHaveClass('right-0') + expect(menu).not.toHaveClass('left-0') + }) + it('shows Auto beside the existing permission modes', () => { render() diff --git a/desktop/src/components/controls/PermissionModeSelector.tsx b/desktop/src/components/controls/PermissionModeSelector.tsx index 9fcac395..91b929fa 100644 --- a/desktop/src/components/controls/PermissionModeSelector.tsx +++ b/desktop/src/components/controls/PermissionModeSelector.tsx @@ -73,6 +73,11 @@ type Props = { */ trigger?: 'chip' | 'elevatedOnly' menuPlacement?: 'top' | 'bottom' + /** + * Which trigger edge the desktop menu lines up with. `right` keeps it inside + * the container when the trigger sits at the end of a row, as in Settings. + */ + menuAlign?: 'left' | 'right' /** Controlled mode: override current value */ value?: PermissionMode /** Controlled mode: called on change instead of updating global store */ @@ -80,7 +85,7 @@ type Props = { } export const PermissionModeSelector = forwardRef(function PermissionModeSelector( - { sessionId, workDir: workDirProp, compact = false, trigger = 'chip', menuPlacement = 'top', value, onChange }: Props = {}, + { sessionId, workDir: workDirProp, compact = false, trigger = 'chip', menuPlacement = 'top', menuAlign = 'left', value, onChange }: Props = {}, handleRef, ) { const t = useTranslation() @@ -175,6 +180,7 @@ export const PermissionModeSelector = forwardRef ) : ( -